媒体查询
在做移动端的页面开发时，为了满足主流手机在不同像素下页面的完美显示，通常会做成响应式页面，通过媒体查询@media，在不同的手机宽度下显示不同的代码，显然这样做是非常麻烦的，得设计好几套代码。
例如，当手机屏幕宽度由320像素变为420像素时，用媒体查询一直保持内容居中。
Flexible.js
在GitHub上，flexible.js是一个开源方案，用于移动端的自适应，这里我们将讨论该方案的实现原理，也就是动态REM方案。
动态REM
在做移动端页面开发时，往往根据设计稿来进行开发。假如我们有一个宽320px的设计稿，如下图，
我们想在iPhone6(宽:375px)上做一个这样的页面，如果直接把320px下设计稿页面放在375px下，强制让它居中，这样是很丑的。如果能让320px下的div宽度和高度以1.172的比例(375/320=1.172)等比放大，这样便可以完美显示设计稿的样式尺寸了。
rem
rem(root em)是CSS3新增的一个相对单位，它是相对与根元素的字体大小的单位。1rem等于根元素的字体大小。
根据这个单位，我们把根元素的字体大小强行设置为375px，那么1rem便等于该页面的宽度。在设计稿里，我们把所有表示以像素为长度的单位，全部除以320，会得到大于0，小于等于1的数。
| 原始宽度 | 相对320px比例 |
|---|---|
| 20px | 0.0625 |
| 40px | 0.125 |
| 80px | 0.25 |
| 120px | 0.375 |
在iPhone6里，圆的直径写出0.25rem，矩形的宽度写成0.375rem，因为1rem在iPhone6里等于375px，这样圆的实际直径为93.75px，刚好是把80px放大1.172倍。同样地，矩形也是如此等比放大1.172倍。最终便可以完美显示设计稿的样式尺寸了。
代码实现
1 | let {clientWidth} = document.documentElement |
clientWidht在不同手机像素下是不同的，iPhone6里，clientWidht等于375px，它表示移动设备的宽度。
优化
对于设计稿里像素宽度较小的div，在用rem表示时，这个比例很小，小数点较多，不易于代码的简单易读，我们可以把1rem的font-size的大小缩小至十分之一，那么相应div表示的ren单位的值就乘以10就可以了。
这里有人会认为，把根元素的font-size缩小100倍，那么表示div的rem单位的值岂不大一点，看起来好看些。但实际情况下，这样并不行，因为HTML5页面的字体是有默认最小单位的，如果把字体改的太小，浏览器会渲染不了，最终表示为浏览器默认的最小字体，那么你设计的页面与设计稿大不一样。
展望
动态REM方案虽然可以让移动端页面自适应，但这个方案过不了多久会被淘汰的，因为CSS3又出了一个新单位即vw,vh，100vw等于页面的宽度，50vw等于页面宽度的一半，显然用这个单位是十分高效的。