在项目中动态指定rem基准值

504 阅读1分钟

rem动态指定基准值 最大为 40px 根据用户的宽度 进行一些计算 把计算出来的值赋给 html 根标签

export const useREM = () => {
  // 监听 html 文档被解析完成的事件
  document.addEventListener("DOMContentLoaded", () => {
    const html = document.querySelector("html")
    // 根据屏幕宽度 /10
    let fontSize = window.innerWidth / 10
    console.log(fontSize)
    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
    // 将计算后的值赋值给html
    html.style.fontSize = fontSize + "px"
  })
}

在mian.js 引入并调用

import { useREM } from "./utils/flexible"
useREM()