REM单位

CSS 中的 rem 单位是相对于浏览器根字体的相对大小单位，这里的根字体大小可以通过 :root 选择器进行设置：

/* 设置根字体大小为 16px */
:root {
    font-size: 16px;
}

当根字体大小为 16px 时，1rem 就等于 16px，2rem 就等于 32px，依此类推。

浏览器影响根字体

如果你不显式设置根字体（就是通过 :root 方法设置），那么网页的根字体大小是由浏览器决定的，这就导致在某些情况下会导致一些糟糕的问题，比如网页结构崩了。

诸如 Edge 浏览器，可以在设置中找到设置网页字体大小的设置，当大小为 small 的时候，网页的根字体大小会被默认设置为 12px，这就很难受了。

因此在使用 rem 这类相对单位时，一定要确保根字体大小已经被设置，要养成好的习惯 💗。

SPA 如何设置

如果你在使用 Vue 或者 React 开发 SPA（单页网页应用），那你可以直接在 index.html 中插入一个 <style></style> 标签，然后再设置根字体大小，以保证设置被全局应用。

<style>
    :root {
        font-size: 16px;
    }
</style>

总结

一句话：养成设置根字体大小的习惯。