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。