使用 rem 在 :root 元素中设置字体大小是有效的。为什么?

agr*_*kiy 2 css font-size

我最近发现以下代码的工作原理非常神奇:

\n\n
:root {\n  font-size: .8rem;\n}\n
Run Code Online (Sandbox Code Playgroud)\n\n

(即它重新调整默认大小)。

\n\n

我的问题是:为什么这有效?我对吗,在里面使用 rem:root应该是非法的或定义错误的(正是因为 rem 被定义为相对于 的:rootfont-size 本身 \xe2\x80\x94 所以使用 rem 来定义:root属性至少是奇怪的) 。

\n\n

谢谢!

\n\n

PS 这是一种理解 CSS 背后的计算机制的“元问题”。我非常确定执行此操作的规范方法是在根元素上设置百分比大小(又名<html>)上设置百分比大小。

\n

Dan*_*nny 6

rem 值是相对于根元素的font-size属性相关,对于 HTML 文档来说,根元素的属性是 html 元素。

\n\n

根据CSS 值和单位模块第 3 级有关 rem 值的规定:

\n\n
\n

等于根元素上 font-size 的计算值。当在根元素的 font-size 属性上指定时,rem 单位指的是属性\xe2\x80\x99s 的初始值

\n
\n\n

如果根元素上没有设置显式值,它将继承用户可以更改的浏览器设置的值;通常浏览器设置中的默认字体大小是 16px 或中号。

\n\n

因此,如果您在根元素上设置 rem,那么您将相对于浏览器设置中的默认值进行设置

\n