一、基础知识点
1、像素：（像素分为三种）（1）设备像素 （Device Pixel） （2）设备独立像素（Device Independent Pixel） （3）CSS像素（CSS Pixel）
（1）设备像素也称物理像素，它表示显示设备的真实像素，此像素是设备的固有属性，是控制显示的最小单位，常说的1920×1080像素分辨率就是用的设备像素单位。
（2）与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，可由 screen.width screen.height 获取设备独立像素的宽高
（3）CSS像素就是我们在编写CSS代码时的像素，在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在。在没有缩放的情况下，1个css像素等同于一个设备独立像素。
2、视口：（视口分为三种： 布局视口 视觉视口 理想视口 ）
（1）布局视口：在PC端上，布局视口等于浏览器窗口的宽度。
而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕。默认情况下，布局视口等于浏览器窗口宽度。
布局视口限制了CSS的布局。在JavaScirpt上获取布局视口的宽度可以通过document.documentElement.clientWidth | document.body.clientWidth得到。
（2）视觉视口：视觉视口是用户正在看到的区域。用户可以缩放来操作视觉视口，而不影响视觉视口的宽度。视觉视口决定了用户看到了什么。
在JavaScript上获取视觉视口的宽度可以通过`window.innerWidth得到。
在PC端上，视觉视口等于布局视口的宽度，无论用户是放大屏幕还是缩小屏幕，这两个视口的宽度仍然相等。
在移动端上，缩放屏幕的过程实质上就是CSS像素缩放的过程。
当用户将屏幕放到到两倍时，视觉视口变小了(因为视觉视口中CSS像素变少了)，而每单位的CSS像素却变大了，因此1px(1个CSS像素)等于2个设备像素。
屏幕缩小时，视觉视口变大(CSS像素变多)，每单位的CSS像素等于更少的设备像素。
但是无论放大或缩小屏幕，布局视口的宽度仍然保持不变。
（3）理想视口：由于默认情况下布局视口等于浏览器窗口宽度，因此在移动端引入了理想视口的概念。理想视口的出现必须需要设置meta视口标签，此时布局视口等于理想视口的宽度。
常见的，iPhone6的理想视口为375px * 667px，iPhon6 plus的理想视口为414px * 736px。在JavaScript上获取视觉视口的宽度window.screen.width得到。
<meta name="viewport" content="width=device-width" /> 当设置了meta视口标签之后，iPhone6的布局视口宽度将等于375px，iPhone6plus布局视口的宽度等于414px。其他移动设备相似。
理想视口会随着屏幕的旋转而改变。当i Phone6为肖像模式时(即竖屏)，此时理想视口为375px * 667px；但为横屏模式时，此时理想视口为667px * 375px。
3、关系：
（1）设备像素比：设备像素比是指设备像素与理想视口宽度的比值，没有单位。CSS上可以通过device-device-pixel-ratio属性设置.
DPR = 设备像素 / 设备独立像素 dpr（device pixel ratio） 在 JS中可通过 window.devicePixelRatio 获取
当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；
当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；
当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。
图片缩放大小 = 图片CSS大小 x dpr
（2）分辨率：分辨率是指每英寸内点的个数，单位是dpi或者dppx。在CSS上可以通过resolution属性设置。一般情况下会使用dpi作为分辨率的单位，因为dppx并非所有浏览器都支持。
1dpr=96dpi， 在iPhon6下，理想视口宽度为375px，而设备像素为750px，因此此时设备像素比为2，分辨率为192dpi。因此如果为iPhon6以下的设备写某个特定样式，可以这样写
// 注意，device-pixel-ratio需要带上-webkit-前缀，保证浏览器兼容性问题。 @media all and (max- 375px) and (-webkit-max-device-pixel-ratio: 2) { body { background-color: red; } } 或者 @media all and (max- 375px) and (max-resolution: 192dpi) { body { background-color: red; } }