一 、 视口
视口：viewport，在PC端，视口就是指浏览器显示页面内容的屏幕区域。而在移动端，视口划分为三个视口概念，分为布局视口、视觉视口以及理想视口。
-
1、布局视口
移动设备的浏览器都默认设置了一个布局视口，一般将视口分辨率设置为980px，使得PC端的网页能够在手机上呈现。
随着布局视口概念的出现，将视口与移动设备的浏览器屏幕宽度的关系划分了开来，网页的布局样式将依据布局视口进行计算与设计。
- 2、视觉视口
从字面上理解，视觉视口就是用户正在看到的网站区域，可以通过缩放来操作视觉视口，但不会影响布局视口，布局视口仍然保持原始的大小；
当进行放大操作时，视觉视口会变小。
-
3、理想视口
理想视口，为了使网站在移动端有最理想的浏览和阅读宽度而设定，对设备来讲，理想视口就是最理想的视口尺寸，即屏幕分辨率的值。通常来讲，布局视口的尺寸不是理想视口，因此，需要手动添加<meta>视口标签来进行操作，使得布局视口与理想视口一致。
<meta>视口标签设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">属性名 描述 width 设置viewport宽度，可以设置device-width特殊值，与设备宽度一致 initial-scale 定义初始缩放比,标准设置为1.0 maximum-scale 定义最大缩放比 minimum-scale 定义最小缩放比 user-scalable 定义是否可以缩放， yes / no (1/0) 标准的viewport参数设置
- 视口宽度与设备保持一致
- 视口的默认缩放比例为1.0
- 不允许用户缩放
- 最大与最小缩放比为1.0
总结：视口就是浏览器显示页面内容的屏幕区域，移动端视口分为布局视口、视觉视口以及理想视口。在移动端布局中，想要的理想视口就是屏幕有多宽，布局视口就有多宽，需要手动通过设置<meta>视口标签来完成。
二、物理像素&物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，这是厂商出厂时就已经设置好的值。
一般开发中，1px并不一定等于1个物理像素；PC端页面中，1px 等于 1物理像素，移动端就不尽相同。
物理像素比，指的是 1 个像素 能够显示的物理像素点的个数
在早期，PC端和手机屏幕， 1 CSS像素 = 1 物理像素
而现在，随着显示技术的提升，大多都是Retina（视网膜屏幕），能够将更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率，提高屏幕显示的细腻程度。
从上图可以看出，1个css像素在Retina中对应了4个物理像素.
然而，按照以上的物理像素比，对于一张50px * 50px 的图片，在手机打开时就会放大倍数，这将会造成图片模糊。在标准的viewport设置中，使用多倍图来提高图片质量，解决高清设备中的模糊问题。通常采用的是二倍图。
多倍图用法
一般要显示一张50px *50px 的图像时，首先需要准备一张100px * 100px 的原始高清图片，在css样式中设置宽高为原始的一半即可；二倍精灵图做法
对于精灵图的做法，也是类似的，以二倍图为例
首先将精灵图整体等比例缩放为原来的一半，之后根据新图的大小测量偏移坐标，还有一点就是要将background-size的值也改为原始的一半
