从根 html 元素继承以 rem 为单位的基于长度的 css 属性

【问题标题】：Inheritance of length based css properties in rem unit from root html element从根 html 元素继承以 rem 为单位的基于长度的 css 属性
【发布时间】：2015-12-06 08:55:11
【问题描述】：

我知道 rem css 单位是一个相对单位，用于从根元素（即 html）派生字体大小。

我的问题是 - 对于从 html 元素派生的任何元素，如果在 rem 中指定，基于长度的 css 属性（如宽度、高度、填充、边距）如何。

举个例子：

<html class="basicStyle">
<body> 
<div id="view">This is some content</div>
</body>
</html>

风格：

.basicStyle{width:500px; font-size:20px}
#view{width:3rem; font-size:2rem}

如果我在 chrome 中尝试这个，#view div 的宽度应该是 3*500px = 1500px - 但事实并非如此。

我想知道我们是否在 rem 中指定元素的宽度或填充 - 从哪个元素以及它是如何计算的 - 以获得计算的宽度。

也欢迎任何文档。

谢谢。

【问题讨论】：

标签： html css width units-of-measurement

【解决方案1】：

rem 单位等于根元素上font-size 的值：

rem 单位
等于根元素上 font-size 的计算值。在根元素的 font-size 属性上指定时，rem 单位指的是属性的初始值。

字体相关长度：em、ex、ch、rem 单位 (http://www.w3.org/TR/css3-values/#font-relative-lengths)

在这种情况下，rem 单位将等于 20px，因为这是在 .basicStyle 中设置的 font-size。

如果您使用rem 计算元素的width，它将不是基于根元素的width，而是基于font-size。因此，在您的示例中，#view 的结果 width 为 3 * 20 = 60px。

html {
  font-size: 20px;
  width: 500px;
}
#view {
  width: 3rem;
}

&lt;div id="view"&gt;This is some content. If you inspect it the width will be 60px.&lt;/div&gt;

【讨论】：

谢谢。非常有帮助。当我调整视口大小或使用不同的设备时，如果根 html 元素发生变化，字体大小也会发生变化吗？？