移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）

1. 视口：(布局视口(layout viewport)，视觉视口(visual viewport)，理想视口(ideal viewport))

• meta 视口标签 <meta  name = "viewport"  content = “ width = device-width，user-scalable = no，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0”
• width：宽度设置的是 viewport 宽度，可以设置 device-width(设备宽度)特殊值
• user-scalable：用户是否可以缩放，yes 或者 no（1 或者 0）
• initial-scale：初始缩放比，大于 0 的数字
• maximum-scale：最大缩放比，大于 0  的数字
• minimum-scale：最小缩放比，大于 0 的数字

　标准的 viewport 设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

2. 物理像素 & 物理像素比

• 物理像素点指的是屏幕显示的最小颗粒（也就是我们说的分辨率），是物理真实存在的，这是厂商在出厂时就设置好的，比如苹果6/7/8 是750*1334
• 开发时的 1px 不一定等于 1个物理像素的
• PC端页面，1个px 等于 1个物理像素，但是移动端就不尽相同
• 一个px的能显示的物理像素点的个数，称为物理像素比或者屏幕像素比
• 在移动端大多数 1px 开发像素 = 2个物理像素

3. 图片，背景图片，精灵图的二倍图

　3.1 二倍图片做法

• 需要一个50*50像素( css 像素)的图片  直接放到 移动端页面里面 会放大2倍 100*100 就会模糊
• 放一个 100*100 的图片，然后手动的把图片样式缩小为 50*50( css像素 )
• 移动端 准备的图片 比我们实际需要的大小  大2倍，这种方式就是 2倍图

　3.2 二倍背景图做法

• 有一个 50*50的盒子需要一个背景图片，但是根据分析这个图片 还是要准备2倍，100*100
• 需要把这个背景图片缩小一半，也就是50*50  background-size：宽度  高度；

　3.3 二倍精灵图做法

• 先把精灵图等比例缩放为原来的一半
• 之后根据大小测量坐标
• 注意代码里面 background-size 也要写：精灵图原来宽度的一半

4. css初始化 normalize.css

　移动端 CSS 初始化推荐使用 normalize.css

　normalize.css：保护了有价值的默认值，修复了浏览器的bug，是模块化的，拥有详细的文档

　官网地址：http://necolas.github.io/normalize.css/

4.特殊样式

　1. css3盒子模型：-webkit-box-sizing：border-box；

　2. 超链接标签，点击高亮，需要清除 设置 transparent  完成透明

　　-webkit-tap-highlight-color：transparent；

　3. 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮 或者 输入框 自定义样式

　　-webkit-appearance：none；

　4. 禁用长按页面时的弹出菜单

　　img,a{ -webkit-touch-callout：none；}

5. 常见屏幕尺寸