现在我们不谈PC，只聊移动端适配那些事儿。
不管是知道还是不知道，开发工具能够说明很多很多
看到这里时候，最好带上笔和纸，勾勾画画，或者打开控制台，切换成手机模式，just coding ! 从而形成一个大概的模型，方便理解。
理解适配，先从两个概念入手：视口 和 像素
视口
视口分为 布局视口 和 视觉视口。
1.布局视口
document.documentElement.clientWidth/Height 返回布局视口的尺寸。
在移动端，布局视口(布局视口一般是980px)和屏幕宽度是完全独立的，他是由浏览器厂商来确定的视口(一般在768px~1024px之间)，为了让网页在窄屏幕上也能显示完整。
我们使用meta标签的 meta 和 媒体查询 指的都是 布局视口。1
2
3
4<meta name='viewport' content='width=640'>
@media (min-width: 640px){
font-size: 16px;
}
2.视觉视口
window.innerWidth/Height 返回视觉视口的尺寸，指我们正在看到的网页的区域。
这里需要补充的一点是有个 理想视口 的概念，对设备来讲是最理想的视口尺寸，即用户不需要额外的操作成本(缩放),即可获得最佳的查看网页外观效果。通常我们通过这样设定：1
2
3
4
5
6<meta name='viewport' content='width=device-width initial-scale=1'>
/*这里的initial-scale=1和width=device-width是一样的效果，
兼容initial-scale，它会将布局视口也同步为缩放后的尺寸
initial-scale=1 解决了 iphone、ipad的毛病，
width=device-width则解决了IE的毛病
*/
让布局视口和设备理想尺寸宽度上保持一致。
像素
像素分为 设备像素 和 css像素
1.设备像素
屏幕的物理像素，对特定的设备来说，该值是固定不变的。
2.css像素
也可以称为设备独立像素。js和css中一个抽象概念，单位px。
当我们给一个 div 元素设置样式 width:10px 那么该元素实际的大小是多少呢？
在移动设备上，一个元素的实际大小有这么两个因子影响着：是否缩放(initial-scale) 、屏幕的分辨率。
我们知道了缩放是相对于布局视口来进行的。当在 dpr=2的并且放大2倍的设备上来说， 10px 表现为 40px(10px22)。
我们定义的是css像素，然后浏览器内部会转换成对应多少设备像素来展示出来。
这里引入一个 设备像素比(device pixel ratio) 即 dpr 。1
2
3dpr = 设备像素/css像素
/*设备像素比也可以*/
dpr = 屏幕横向设备像素/理想视口宽度
可以通过 window.devicePixelRatio 来得到该值。
通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。
在不缩放前提下，1px1px的元素在dpr=2上使用了22个设备像素，在dpr=3的设备上使用了33个设备像素，同样面积(1px1px)的区域使用的设备像素越多，就显示的越清晰。
