1、视口
1、1 布局视口layout viewport
移动端的浏览器都默认设置有一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
移动端基本都将这个视口分辨率设置为 980px，可以将PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
1.2 视觉视口 visual viewport
布局视口在手机上保持原始网页大小，当前屏幕大小显示不全只能看到部分，可以通过滑动缩放浏览网页其他部分。
1.3 理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口 需要手动添写meta视口标签通知浏览器操作
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
2、二倍图
2.1 物理像素比
手机端开发时的 1px 不一定等于1个物理像素（通常是1：2 的关系），那么对于一张 50px * 50px 的图片，在 pc 端可以显示正常，而在手机端将会被放大两倍，导致模糊
解决方法：使用二倍图
- 使用二倍尺寸大小的图
- 再将图的宽高缩小一半
手机端即可显示高清正常
2.2 背景大小 background-siz
语法：background-size：背景图片宽度 背景图片高度； 单位：
- px（指定宽、高）
- 百分比（占父级大小的百分比）
- contain（等比例缩放到父级可以显示的最大尺寸，不得溢出）
- cover（等比例缩放到完全铺满父级的大小，溢出则隐藏） 注意：
- 写单个值表示宽，高则默认 auto
- 必须写在 background-image 后才生效
2.3 二倍精灵图
- 先用 PS 或 FW 将精灵图等比例缩小一半
- 再测量位置
- background-size 写缩小后精灵图的尺寸
