对于刚接触移动端的适配，我想最大的困惑应该是为什么全部像素不能和pc端一样按照设计稿给定的像素来处理？
想弄明白上面的这个问题，得先搞明白像素和视口。
像素：中文全称为图像元素。是指在由一个数字序列表示的图像中的一个最小单位。像素仅仅只是分辨率的尺寸单位，而不是画质。通常以像素每英寸（PPI）为单位来表示影像分辨率的大小。
适配中需要考虑两种像素
1.设备像素
屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定不变的，单位是pt
2.css 像素
在css、js中使用的一个抽象的概念，单位是px
顺便说下,css像素也可以称为设备独立像素（device-independent pixels）简称为dips，单位是dp
那么，设置一个元素width:200px，这个元素便跨越了200个css元素，200个css元素相当于多少个设备元素取决于两个条件
<1>页面是否缩放
缩放与设备像素、css像素的关系
缩放是在放大或缩小css像素，比如一个宽度为200px的像素无论怎样放大，还是200个css像素。但是因为这些像素被放大了，所以css像素也就跨越了更多的设备像素，缩小则相反。
缩放与视口
视觉视口:视觉视口是用户正在看到的网页的区域，大小是屏幕中css像素的数量
window.innerWidth/Height 返回视觉视口的尺寸
缩放会影响视觉视口的尺寸。页面被用户放大，视觉视口内css像素数量减少；被用户缩小，视觉视口内css像素增多。
用户缩放不会影响布局视口但是设置缩放
<meta name="viewport" content="initial-scale=2">后，initial-scale有一个副作用：同时也会将布局视口设置为缩放后的尺寸，所以initial-scale=1与width=devide-width的效果是一样的
布局视口:一个没有为移动端做优化的网页，会尽可能缩小网页让用户看到所有东西。浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把视口宽度设置得很大，一般在768~1024px之间，最常见的宽度是980px。所以在手机上视口与移动端浏览器屏幕宽度不再相关联，是完全独立的，这个浏览器厂商定的视口被称为布局视口。
布局视口我们是看不见的，只知道网页的最大宽度是980px。可以这样设置布局视口的宽度:
<meta name="viewport" content="width=640">
媒体查询与布局视口 700px指的是布局视口的宽度
@media (min-width:700px){}
document.documentElement.clientWidth/Height返回布局视口的尺寸
理想视口：布局视口明显对用户是不友好的，完全忽略了手机本身的尺寸。所以苹果引入了理想视口的概念，它是对设备来说最理想的布局视口尺寸。理想视口中的网页是对用户最理想的宽度，用户进入页面的时候不需要缩放。
如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口：
<meta name="viewport" content="width=device-width">
定义理想视口是浏览器的事情，并不能简单认为是开发者定义的，开发者只能使用。
screen.width/height 返回理想视口的尺寸,有严重的兼容性位图---可能返回两种值：
1.理想视口的尺寸(下载浏览器)
2.屏幕的设备像素尺寸(内置浏览器)
完美视口：
解决各种浏览器兼容问题的理想视口设置:
<meta name="viewport" content="width=device-width,initial-scale=1">
<2>屏幕是否为高密度
在缩放程度为100%(这个条件很重要，因为缩放也会影响他们)时，他们的比例叫做设备像素比（device-pixel-ratio dpr）
dpr = 设备像素/css像素
可以通过js得到 dpr : window.devicePixelRatio
所以对于第一个问题我想现在已经有了答案。
在屏幕不缩放的前提下，dpr决定了我们如何将设计稿的的像素转换为css像素。
10px*10px的图片在dpr为2的屏幕下显示为20px*20px，为了不被放大模糊掉，所以设计稿中这图片是20px*20px的。这样子我们设置该图片的css像素时为10px*10px，实际显示为20px*20px,最终结果是图片正常显示，不会模糊。
<3>屏幕像素密度
ppi=√ (window.screen.width∧2 * window.screen.height∧2)/屏幕尺寸
ppi为160时，一个css像素和一个设备像素相对应。
