rem( font size of the root element)：相对于根元素的字体大小的单位
在没有设置根节点的情况下默认 1rem = 16px
动态修改html 的font-size有以下两种方法:
- 媒体查询改变html 的font-size
- js 动态改变
- 基准值计算(html的font-size的值)，数值计算（rem）
数值(rem) = 要换算的值（px）/ 基准值
不使用sass计算rem:(750设计稿)
首先要确认一点，设计稿的尺寸是css像素的2倍，设置基准值时设置为（750/2）px，基准值设置不宜过大，再除以10， 设置为37.5。
- 设置字体大小，也就是基准值，比如37.5px
- 获取设计稿的尺寸，比如高度 166px
- 利用公式计算rem：（166/2）/ 37.5 = 2.2133rem
动态适配移动端还需要添加下面js到页面中
// 根据视窗调整基准值，适配移动端
function initResize () {
var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
var htmlDom = document.getElementsByTagName('html')[0];
// 确定基准值，设计稿的尺寸是css像素的2倍，需要缩小2倍，基准值不宜过大，再缩小10倍
htmlDom.style.fontSize = ((htmlWidth/2) / 10) + 'px';
}
initResize();
window.addEventListener('resize', function () { initResize(); })
Sass 换算rem函数(以750设计稿为例子)：
@function px2rem($px) {
// 设计稿的尺寸是css像素的2倍，设置基准值时设置为（750/2）px，基准值设置不宜过大，再除以10
$rem: 37.5px; // 根据设计稿变换该值
@return ($px/$rem)+rem;
}
使用的时候传入设计稿上元素的值的一半，如果不想自己去除以2，可以将该方法里的$rem*2，同时，根据视窗调整基准值里
htmlDom.style.fontSize = ((htmlWidth/2) / 10) + 'px';
也要相应的调整为：
htmlDom.style.fontSize = (htmlWidth / 10) + 'px';
这样就可以直接传设计稿上的值了
以上就是最基本的rem的适配了，移动端的适配后面还会有很多坑要填，慢慢去填喽～～～
