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. 常见屏幕尺寸
