CSS-rem

rem是什么？

• 绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，指定的值是不会变化的。例如mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
  pt, pc: 点（Points (1/72 of an inch)）， 十二点活字（ picas (12 points.)）
• 相对单位，他们是相对于当前元素的字号（ font-size ）或者视口（viewport ）尺寸。
• px:绝对单位。因为无论其他相关的设置怎么变化，像素的值是不会变化的。
• ex, ch: 相对单位。分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。
• vw, vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持。
• em:相对单位。1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。
• rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，所以这听起来像一个比em更好的选择，虽然在旧版本的IE上不被支持。

为什么要使用相对单位？

使用相对单位是非常有用的-你可以相对于你的字体或视口大小来调整HTML元素的大小。

为什么要使用rem？

rem能等比例适配所有屏幕。

如何使用？

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }

大多数浏览器的默认字号是16px，因此1rem=16px，这样不方便我们px和rem的换算，假设1rem=10px，那么100px=10rem，25px=0.25rem。这样就好换算很多，于是就有了上面的10/16。如果是640的设计稿，需要除以2转化为和iphone5屏幕等宽的320。所以设计稿px单位/2/10转为rem。之后再媒体查询设置每个屏幕大小的font-size百分比，页面会根据上面设置的根font-size适配。
我们通过媒体查询给不同设备设置根元素的字体大小，从而使页面在不同的设备上等比缩放。

使用flexible.js

1 引入<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
2 VS Code 安装插件cssrem
3 如果是750的设计稿将插件的rootFontSize设为75
4 使用：例如设计稿有一个图片宽200px,高100px

当然，如果你使用 webpack 打包你的项目，可以加入对应 loader 自动转换单位， 推荐 loader css2rem。