英文:
What does it mean to set the root element's font-size in em units?
问题
I've not been able to find the official definition of em units, but I have found this in the spec:
I've also found a lot of other sources (listed below). This got me thinking, what does it mean to set the font size of the root element (i.e., <html>) to em units? Although a lot of my sources recommend using em, I couldn't find any that call out root element usage specifically.
html {
font-size: 1em;
}
<html>
<body>
<h1>html { font-size: 1em; }</h1>
<p>Hello World!</p>
</body>
</html>
html {
font-size: 1.5em;
}
<html>
<body>
<h1>html { font-size: 1.5em; }</h1>
<p>Hello World!</p>
</body>
</html>
html {
font-size: 0.5em;
}
<html>
<body>
<h1>html { font-size: 0.5em; }</h1>
<p>Hello World!</p>
</body>
</html>
In these three above examples, I see the difference with my eyes, but what is the correct way to interpret what I'm seeing? In other words, what does html { font-size: <x>em; } mean?
Sources
- https://ux.stackexchange.com/questions/7820/font-size-for-mobile-sites
- https://w3c.github.io/csswg-drafts/css-values-4/#em
- https://www.w3.org/Style/Examples/007/units.en.html#font-size
- https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
英文:
I've not been able to find the official definition of em units, but I have found this in the spec:
I've also found a lot of other sources (listed below). This got me thinking, what does it mean to set the font size of the root element (i.e., <html>) to em units? Although a lot of my sources recommend using em, I couldn't find any that call out root element usage specifically.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html {
font-size: 1em;
}
<!-- language: lang-html -->
<html>
<body>
<h1>html { font-size: 1em; }</h1>
<p>Hello World!</p>
</body>
</html>
<!-- end snippet -->
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html {
font-size: 1.5em;
}
<!-- language: lang-html -->
<html>
<body>
<h1>html { font-size: 1.5em; }</h1>
<p>Hello World!</p>
</body>
</html>
<!-- end snippet -->
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html {
font-size: 0.5em;
}
<!-- language: lang-html -->
<html>
<body>
<h1>html { font-size: 0.5em; }</h1>
<p>Hello World!</p>
</body>
</html>
<!-- end snippet -->
In these three above examples, I see the difference with my eyes, but what is the correct way to interpret what I'm seeing? In other words, what does html { font-size: <x>em; } mean?
Sources
答案1
得分: 1
从规范中：
> 当用作元素的font-size属性值时，它们会相对于父元素的计算度量解析，或者相对于与font和line-height属性的初始值相对应的计算度量，如果元素没有父元素。
英文:
From the specification
> When used in the value of the font-size property on the element they refer to, the local font-relative lengths resolve against the computed metrics of the parent element—or against the computed metrics corresponding to the initial values of the font and line-height properties, if the element has no parent.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论