移动端布局让人费解的就是他的自动适配各个不同屏幕尺寸，里面有很多的概念，简单坐下总结，以便以后忘记。
屏幕尺寸：就是屏幕对角线的长度。
css像素：就是我们设计图上的尺寸，单位px。又被叫做与设备无关的像素，简称DIPs，在普通屏幕下，一个css像素就是一个设备像素。
设备像素：又叫物理像素，就是手机的分辨率的一个点，比如ip6 750*1337，他的一个点就是一个物理像素 ，移动屏幕上的最小颗粒，设备定制出来，数量也不会变了，数量越多是不是颗粒就越小呢，好像也更清楚，哈！
设备独立像素：也叫密度无关像素是一个虚拟像素（类似css像素），由系统转换为物理像素，别不设备的宽高可以理解为设备独立像素
像素比 dpr：设备像素比 = 物理像素 / 设备独立像素
布局视口：layout viewport，获取document.documentElement.clientWidth / Height，布局视口就是有多大就是多大，会出现横向滚动条，最理想的布局视口大小就是理想视口，用户就不用缩放了。
视觉视口：visual viewport，就是我们可以看到的区域，不算边框，假如我们可以缩放图片，我们看到的图片的区域变小了，那么布局视口和视觉视口的关系就是：当前缩放值 = 理想视口宽度 / 视觉视口宽度
理想视口：ideal viewport，就是分辨率，理想viewport的宽度等于移动设备的屏幕宽度，也就是宽度为100%的效果。
使得布局视口和理想视口宽度一致：<meta name="viewport" content="width=device-width">，content="width=device-width"这个就是为了设置成理想视口
rem+媒体查询：
***head中添加视口设置***
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
***设置根元素font-size***
html{ max-width: 640px; margin: 0px auto; font-size: 100px;-----相当于1rem=100px/16px*100%=625% } ****css媒体查询适配***
@media only screen and (max-width: 414px){ html{ font-size: 64px; ----相当于1rem=64px/16px*100%=400% } } @media only screen and (max-width: 375px){ html{ font-size: 58px;-----相当于1rem=58px/16px*100%=362.5% } } @media only screen and (max-width: 360px){ html{ font-size: 56px; } } @media only screen and (max-width: 320px){ html{ font-size: 50px; } }
一般我们拿到的图纸（举例）是375 640 750，取640为例，设置其在不同设备下可以完美显示
通过上面的相当于可以看出设备尺寸不同，1rem=的css像素也不同了，就可以在不同的设备上有相同的布局了，只不过相同的结构的宽高等相对比起来不一样，这正是我们要的。
通过js调控达到适配：
引入淘宝的适配js的flexible.js文件： https://github.com/amfe/lib-flexible/blob/master/src/flexible.js
其实flexible首先动态改写meta中的scale，使得永远都是1:1，然后动态改写dpr的值，最后动态改变font-size的值。
默认把设计稿分成100分，每一份是1a，并且默认1rem = 10a，那么1rem = 设计稿尺寸/100*10 = 设计稿尺寸/10 = 基准值 = html中font-size的值。
重点：先会用在理解，不然理解起来很费劲，在用的过程中就懂概念了。