rem布局的实现

什么是rem？

rem是指相对于html根元素字体大小的一个比例单位。例如html默认的font-size是16px，此时你想把元素的高度定义为32px就可以写height:2rem。
这里需要区分一下rem和em，这是两个不同的单位。em是相对于父元素的大小比例，rem是相对于根元素的。

为什么要使用rem？

rem是一种适配各种设备尺寸的一种布局方案。只要在页面每次加载时获取当前设备的尺寸，重新定义页面根元素的font-size，就可以用同一套样式适配多种设备，不同设备会根据根元素的大小重新计算实际的px值。

具体实现

假如我们的设计稿是720px的，为了计算方便，我们可以把720px时的font-size设为100px，这样开发时，1rem=100px。
稍微限制下设备的尺寸，最小320px，最大720px。
具体实现代码。

// rem布局，动态控制页面的font-size
    fnResize();
    window.onresize = function () {
      fnResize()
    };
    function fnResize() {
      let deviceWidth = document.documentElement.clientWidth || window.innerWidth;
      if (deviceWidth >= 720) {
        deviceWidth = 720
      }
      if (deviceWidth <= 320) {
        deviceWidth = 320
      }
      document.documentElement.style.fontSize = (deviceWidth / 7.2) + 'px';
    }

实际效果

iPhone4

iPhone6 plus