前端实践之rem布局

网上很多教程是直接设置html的font-size等于一个固定的像素，但是这种方法我一直不理解，好像也不合理，最近跟同事探讨这个问题发现大家对这个东西都很模糊，然后就深究了一下，最后就有了下面的这段代码。
实现方案一：

(function (doc, win) {
  // 获取HTML的DOM节点
   let docEl = doc.documentElement;
   // 监听是横向查看还是纵向查看模式
   let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
   // 计算rem比值的函数
   let recalc = function () {
     // 获取屏幕的宽度单位px
     let { clientWidth } = docEl;
     if (!clientWidth) return;
   // 根据主流屏幕尺寸进行划分，经常按照UI设计图宽度的整数倍进行划分
     if (clientWidth >= 750) {
     /**
      * rem是基于html的font-size属性进行计算的
      * 设置fontSIze默认大小为100px
       * 所以当屏幕大于等于750px的时候 1rem = 100px
      */
       docEl.style.fontSize = '100px';
     } else { // 当屏幕小于设置阀值时重新计算rem比值
    // 以下代码以750px的屏幕为标准，进行rem比值计算
    // 以375px宽的手机为例，1rem = 50px
       docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
     }
   };
   if (!doc.addEventListener) return;
   // 监听屏幕横竖屏切换事件
   win.addEventListener(resizeEvt, recalc, false);
   // 就是当一个 HTML 文档被加载和解析完成后，DOMContentLoaded 事件便会被触发
   doc.addEventListener('DOMContentLoaded', recalc, false);
 })(document, window);

实现方案二：（推荐这种方案）

function setRem() {
  const docEl = document.documentElement;
  const dpr = window.devicePixelRatio || 1;

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    const rem = docEl.clientWidth / 10;
    docEl.style.fontSize = rem + 'px';
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit);
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    const fakeBody = document.createElement('body');
    const testElement = document.createElement('div');
    testElement.style.border = '.5px solid transparent';
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines');
    }
    docEl.removeChild(fakeBody);
  }
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
};

然后再将px转为rem，在开发的时候将设计稿调整为375px然后直接按照设计图的尺寸进行开发即可

实现原理：使用js判断屏幕的大小动态设置html的font-size的大小来计算rem和px的比值。