DOMContentLoaded顾名思义就是DOM内容加载完毕。

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 这里有一个常见的错误，就是在本应使用 DOMContentLoaded 会更加合适的情况下，却选择使用 load，所以要谨慎。
注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。

在Vue项目的App.vue中，我们可以这样设置字体。

1、获取HTML元素；

2、根据屏幕宽度动态计算fontSize

3、当fontSize大于50时，设置最大值为50

4、设置HTML的fontSize属性，使rem生效，1rem = fontSize + “px”

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
// DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。
  document.addEventListener('DOMContentLoaded', () => {
    // 获取html元素
    const html = document.querySelector('html')
    // 根据屏幕宽度动态计算fontSize
    let fontSize = window.innerWidth / 10
    // 当fontSize大于50时，设置最大值为50
    fontSize = fontSize > 50 ? 50 : fontSize
    // 设置html的fontSize属性，使rem生效，1rem = fontSize + 'px'
    html.style.fontSize = fontSize + 'px'
  })
</script>