【移动端适配】动态调整rem

移动端的项目，尺寸单位一般用rem和vw/vh比较多，这里说一下rem。
rem是html元素的字体大小，默认情况下是16px，但是不同大小的屏幕像素数量是不一样的。因此16px在不同设备中的观感就不一样。
今天看项目的时候看到src/utils/adapative.js里对于移动端的rem是这样定义的：

// 设计宽度
const designWidth = 375
// 设计字体大小
const designFontSize = 16

//向外输出一个获取rem具体数值的接口，以备不时之需
export function getFontSize () {
  const { clientWidth } = document.documentElement
  const fontSize = clientWidth * designFontSize / designWidth
  return fontSize
}
// 将html元素的fontSize设置为根据屏幕大小动态计算出的值
function adjustFontSize () {
  // 根据计算结果设置rem
  const htmlEle = document.querySelector('html')
  let fontSize = getFontSize()
  htmlEle.style.fontSize = `${fontSize}px`
  //当屏幕大发生变化时，重新计算rem
  window.onresize = () => {
    fontSize = getFontSize()
    htmlEle.style.fontSize = `${fontSize}px`
  }
}
//执行这个函数
adjustFontSize()

在根目录的main.js里执行这个脚本即可（@就代表src目录）

import '@/utils/adaptive.js'