export const useREM = () => {
  // 定义最大的fontSize
  const MAX_FONT_SIZE = 40
  // 监听 html 文档被解析完成的事件
  document.addEventListener('DOMContentLoaded', () => {
    // 拿到 html 标签
    const html = document.querySelector('html')
    // 计算 fontSize，根据屏幕宽度 / 10
    let fontSize = window.innerWidth / 10 // 包含滚动条的宽度
    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize

    html.style.fontSize = fontSize + 'px'
  })
}

当一个 HTML 文档被加载和解析完成后，DOMContentLoaded 事件便会被触发。我查了DOMContentLoaded的触发具体时间，主要解释是：
1、当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件
2、如果文档中包含脚本（async或defer脚本除外），则脚本会阻塞文档的解析
3、脚本需要等 CSSOM 构建完成才能执行

这样看，DOMContentLoaded 至少要等到cssom构建完毕后再能触发，然后在触发的回调函数里设置font-size大小。如果存在非一部的js脚本，还需要等待更长时间。

综上，useREM是不是不放在DOMContentLoaded事件的回调函数里更妥当呢？
是否直接放在head 标签里更加好？