【问题标题】:Using rem to set font-size inside :root element works. Why?使用 rem 在 :root 元素中设置字体大小有效。为什么?
【发布时间】:2018-04-24 06:53:45
【问题描述】:

我最近发现下面的代码就像一个魅力:

:root {
  font-size: .8rem;
}

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

我的问题是:为什么会这样?我对在:root 中使用rem 应该是非法的或定义不正确(因为rem 被定义为相对于:root 的字体大小本身的原因——所以使用rem 来定义:root 的属性是至少很奇怪)。

谢谢!

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

【问题讨论】:

  • rem 是相对测量值,最好参考绝对测量值,例如 16px。
  • 没有。根据定义,它是指根的字体大小。 root 的字体大小为 16 的事实与 rem 的巧合。
  • "...这是最好的参考像 16px 这样的绝对测量值。" 最好 表示意见。 like 16px 就是一个例子。这不是巧合,大多数浏览器都将 root 的默认字体大小设置为 16px。将根字体大小设置为 .5em 时,是根字体大小的 0.5,即 16 像素。如果您将根字体大小更改为 8px,则它与 0.5em 相同。最好使用绝对测量来减少工作量。
  • 谢谢,现在我明白你的意思了。但是我的困惑完全来自以通过相同根字体大小定义的单位设置根字体大小的怪异。对我来说,这就像在设置 A 之前说“将变量 A 定义为变量 A 的 0.8”。下面的答案中的文档通过明确地说有一个执行所有计算的初始值来解决这种混淆(我看到您在回复中隐含地引用了这个初始值)。谢谢。

标签: css font-size


【解决方案1】:

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

根据CSS Values and Units Module Level 3 关于 rem 值:

等于根元素上计算的 font-size 值。什么时候 在根元素的 font-size 属性上指定,rem 单位 引用属性的初始值

如果根元素上没有设置明确的值,它会从用户可以更改的浏览器设置中继承它的值;通常浏览器设置中的默认字体大小为 16px 或 medium。

因此,如果您在根元素上设置 rem,则您将其设置为相对于浏览器设置中的默认值

【讨论】:

  • 太好了!正是我想要的!谢谢!
猜你喜欢
  • 2020-12-31
  • 2021-11-14
  • 2020-05-17
  • 2019-08-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多