配置rem

rem是基于html元素的字体大小来计算的

网页要实现的大小 = 需要设置的rem大小（根据设计稿给出的的px和自定的px和rem比例计算） * html元素的字体大小

 所以要实现设计稿并且适应宽度不同的屏幕需要经过一下计算

1.由于设计稿的宽度是一定的，高度是不可控的，所以我们根据宽度来设置html字体的大小比例

2.首先假设设计稿宽度是750px，100px = 1rem

3.网页的实际宽度 = 7.5（rem）* html元素的字体大小 

4.所以只需要设置 html元素的字体大小 = 网页的实际宽度/(设计稿宽度/自定的px和rem比例) 就能自适应不同的宽度的页面

 

代码实现

(function () {
  let remInitialized = false;

  function initRem() {
    var $html = document.querySelector('html');
    var $body = document.querySelector('body');
    var $screen = document.createElement('div');

    $screen.style.cssText += 'position:fixed; width:100%; height:100%; display:none;';
    $body.insertBefore($screen, $body.firstChild);

    function setRem() {
      $screen.style.display = 'block';
      var w = Number(document.defaultView.getComputedStyle($screen).width.replace(/px/, ''));
      $screen.style.display = 'none';
      $html.style.fontSize = (100 * w / 375) + 'px';
    }
    setRem();
    window.addEventListener('resize', setRem);
    window.addEventListener('orientationchange', setRem, false);
    remInitialized = true;
  }

  initRem();
}());

在使用时只需要将这个js文件引入，并以100比1的比例自己转换px和rem，就可实现想要的适应不同尺寸的展示效果