动态REM

常见单位

• 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 为单位的。
参考：

• MDN: length