rem布局

(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是基于document的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);

标签：doc,布局,clientWidth,let,rem,docEl,屏幕
来源： https://blog.csdn.net/qq_40792558/article/details/114830408