移动端适配简单总结

　　移动端布局让人费解的就是他的自动适配各个不一样屏幕尺寸，里面有不少的概念，简单坐下总结，以便之后忘记。

屏幕尺寸：就是屏幕对角线的长度。

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的值。
重点：先会用在理解，否则理解起来很费劲，在用的过程当中就懂概念了。