Rem适配

206 阅读1分钟
((doc, win) => {
      const DESIGN_WIDTH = 750;
      const docEl = doc.documentElement;
      const resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'; // 屏幕旋转,重新计算
      const reCalcSize = () => {
        const clientWidth = docEl.clientWidth;
        console.log(clientWidth);
        if (!clientWidth) return;
        if (clientWidth >= DESIGN_WIDTH) {
          docEl.style.fontSize = '100px';
        } else {
          docEl.style.fontSize = `${100 * (clientWidth / DESIGN_WIDTH)}px`
        }
      }

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvent, reCalcSize, false);
      doc.addEventListener('DOMContentLoaded', reCalcSize, false);
    })(document, window);

使用

    width: 1rem;
    height: 1rem;
    background-color: aqua;