rem布局

1、单位

• em：是一个相对单位，1em等于当前元素或父元素的font-size值。
• rem：是一个相对单位，1rem等于根元素的font-size值。
• vw / vh：把屏幕分为100份，100vw等于屏幕宽度，1vw等于屏幕宽度的1%。

2、原理

根据屏幕大小，动态设置根元素的字体大小

3、动态设置font-size

• 通过js
  设置font-size，使同一段代码在不同的设备上保持一致
  设计稿以375px为宽度，约定1rem等于100px

(function () {
    function resizeBaseFontSize() {
      var rootHtml = document.documentElement,
        deviceWidth = rootHtml.clientWidth;
      if (deviceWidth > 640) {
        deviceWidth = 640;
      }
      rootHtml.style.fontSize = deviceWidth / 3.75 + "px";
    }
    resizeBaseFontSize();
    window.addEventListener("resize", resizeBaseFontSize, false);
    window.addEventListener("orientationchange", resizeBaseFontSize, false);
  })();

• 通过vw
  设计稿以375px为宽度，约定1rem等于100px
  375px == 100vw; 100px == 26.66667vw

html { font-size: 26.66667vw; }

要给body重置一下font-size：16px;