JavaScript 中 rem 的实现和计算

rem

1、定义

rem（font size of the root element）是指相对于根元素的字体大小的单位。
1rem 等于根元素 htm 的 font-size，即只需要设置根元素的 font-size，其它元素使用 rem 单位时，设置成相应的百分比即可。

2、如何实现

rem(倍数） =  width  / （html的font-size）=>  width = (html的font-size) * rem(倍数)

只要 html 的 font-size 的大小变了，width 就会自动变，所以 rem 是通过动态设置 html 的 font-size 来改变 width 的大小，以达到网页自适应大小的目的

定义公式：rem(倍数） = width / （html的font-size），根据公式我们可以得出：
rem(倍数） = 设计稿宽度( imgWidth ) / 你设置的font-size( defalutSize )
rem(倍数） = 网页的实际宽度(screenWidth) / 你需要动态设置的font-size( x ) ,那么得出设置html的font-size的公式为：

<script type="text/javascript">
  (function(w,d) {
  function setSize() {
    var screenWidth = d.documentElement.clientWidth;
    var currentFontSize = screenWidth * 100 / 750;
    d.documentElement.style.fontSize = currentFontSize + 'px';
  }
  w.addEventListener('resize',setSize);
  w.addEventListener('pageShow',setSize)
  w.addEventListener('DOMContentLoaded',setSize)
})(window,document)
</script>

function setHtmlSize(){
  var pageWidth = window.innerWidth;
  if(typeof pageWidth != "number"){ 
    if(document.compatMode == "number"){ 
      pageWidth = document.documentElement.clientWidth;
    }else{ 
      pageWidth = document.body.clientWidth; 
    } 
  } 
  var fontSize = (window.innerWidth * 100) / 750;
  if(fontSize<40){
    fontSize = 40;
  }
  //根据屏幕大小确定根节点字号
  document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';
}
function resize(){
  setHtmlSize();
}
if (window.attachEvent) { 
  window.attachEvent("resize", resize); 
} else if (window.addEventListener) { 
  window.addEventListener("resize", resize, false);   
}
setHtmlSize();

3、以 750 宽度来算，1rem = 100px，iphone6/7/8 plus 中设置 width: 6.5rem 元素的宽为多少？

plus 中宽度为 414
所以宽度为 414 / 750 * 6.5 * 100
0.32 rem 为
414 / 750 * 0.32 * 100