⭐️ rem 适配方案

原理是什么？

rem是个相对单位，相对的是 html 根元素的 font-size 大小。这样一来我们就可以通过 html 上的字体大小来控制页面上所有以rem为单位的元素尺寸。

两种常见方案

把页面宽度分成 10 份

思路：

把页面宽度分成10分，算出每份px值（window.innerWidth / 10）
写个 scss mixin 函数，参数为设计稿px值，返回对应rem值（也就是份数）
1. 公式：rem份数 = 设计稿px / 每份有多少px值

示例代码 例如在vue项目的index.html页中动态计算根元素字体大小

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    ...
  </head>
  <body>
    <noscript>
      ...
    </noscript>
    <div id="app"></div>
    <script>
    ;(function(doc, win) {
      const docEl = doc.documentElement
      const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      const recalc = () => {
        let clientWidth = docEl.clientWidth;
        clientWidth = clientWidth < 750 ? clientWidth : 750;
        // 把屏幕宽度划分成10份，那么每一份的宽度就等于1rem，也就是 75px
        docEl.style.fontSize = clientWidth / 10 + 'px'
      }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
      recalc()
    })(document, window)
    </script>
  </body>
</html>

然后利用 CSS 预处理器定义一个 mixin 函数（下方用的 stylus），用来将设计稿上的 px 转为对应的rem值计算公式为：页面元素的rem值 = 设计稿元素值（px）/（屏幕宽度 / 划分的份数）

mixin.stylus

/* 把px转为rem */
/* 用设计稿px除以每一份rem的px，就能算出几个rem */
px2rem(designpx)
  $rem = 750 / 10;
  return (designpx / $rem)rem

最后在css中使用

某vue组件的style标签中

/* 375设计稿上100%宽以及50高的导航条（iPhone6的dpr为2，所以px值得都乘以2） */
header
  width px2rem(750)
  height px2rem(100)

html的font-size设置为 100px （PC端适配）

思路：

html { font-size: 100px; }，把100px当做因子