常见单位
- px : 固定单位
- 百分比
- em： 相对单位，相对于自己的 font-size。如果用在 font-size 属性本身，它会继承父元素的font-size。
当你针对同一个元素使用em声明font-size和其他属性的时候，浏览器先计算font-size，然后基于这个值再去计算其他值：
<div style ="font-size: 12px" >
<p style = "font-size: 2em;height: 2em;background: #ccc;">这是em</p>
<!-- p 的最终样式为： font-size: 24px ;height: 48px; -->
</div>
当你针对同一个元素使用em声明font-size和其他属性的时候，em会变得很神奇。此时浏览器必须先计算font-size，然后基于这个值再去计算其他值。这些属性声明的时候使用的是相同的em值，但很可能它们会有不同的计算值。
- rem： 相对单位，相对于根元素（html) 字体大小
- vw、vh：相对单位， 1vw 为视口宽度的1%， 1vh 为视口高度的1%
动态 REM
原理
一切单位以宽度为基准（其实vw最好，但是兼容性差）
1 rem = html font-size = 页面宽度
具体代码如下：
var pageWidth = window.innerWidth;
console.log(pageWidth);
var html = document.getElementsByTagName('html');
console.log(html);
html[0].style.fontSize = pageWidth + 'px'; // html是个类数组对象，所以下标一定不要忘了
利用Sass 将 px 自动变为 rem
在 scss 文件里加上下面这个函数（也可以是其他的），就可以实现px 自动转化为rem 了。
@function px2rem($px){
@return $px/$designWidth + rem;
}
$designWidth : 640
小优化
由于上面的方法使 1 rem = 页面宽度，写样式的时候以 rem 为单位时，小数太多，可以稍微优化一下，比如如果设计稿宽度是 640px，那我就让 1 rem = 页面宽度/ 6.4 （注意浏览器最小字体）
var pageWidth = window.innerWidth;
console.log(pageWidth);
var html = document.getElementsByTagName('html');
console.log(html);
html[0].style.fontSize = pageWidth/6.4 + 'px'; // html是个类数组对象，所以下标一定不要忘了
@function px2rem($px){
@return 6.4 * $px/$designWidth + rem; // 这里要把 6.4 乘回来
}
$designWidth : 640
写样式的时候调用这个函数
eg.
width: px2rem(30) 会根据函数自动将宽度变成 以rem 为单位的。
参考：
