我有一个简单的问题,rem
的基础大小是从哪里声明的?
<body>
<h1>Something</h1>
</body>
我可以看到在<body>
中设置了font-size
为16px,而<h1>
设置为3rem
,但是字体呈现为30px,而我期望的是48px。是否有任何父级可重新定义基础?
我有一个简单的问题,rem
的基础大小是从哪里声明的?
<body>
<h1>Something</h1>
</body>
我可以看到在<body>
中设置了font-size
为16px,而<h1>
设置为3rem
,但是字体呈现为30px,而我期望的是48px。是否有任何父级可重新定义基础?
rem
表示根元素(通常是
<html>
)的字体大小。当在根元素的字体大小内使用时,它表示其初始值(一个常见的浏览器默认值是16px,但用户定义的偏好可能会修改这个值)。
换句话说,改变你的html
元素的字体大小,rem
的计算基础也会随之改变。
例如:
<html style="font-size: 10px">
...
</html>
em
来代替,它与父元素的字体大小相关。 - TimoStaudingerhtml
设置字体大小就是这么做的。 - Kevin Jantzerrem
单位基于html
元素的字体大小,而不是body
元素。默认大小通常在html上为16px,但这并不保证,用户可以更改该默认值。一种常见做法是在html上手动设置字体大小,并将其显式设置为16px值,然后在其他地方使用rems来设置最终显示值。
然而,这种做法存在无障碍问题,因为当用户想要或需要增加默认字体大小时,页面和布局应该能够适应不同的尺寸。
来自https://developer.mozilla.org/en-US/docs/Web/CSS/font-size:
rem值相对于根html元素而不是父元素。换句话说,它让您以相对方式指定字体大小,而不会受到父级大小的影响,从而消除了复合效应。
只需设置html
元素的字体大小:
html {
font-size: 10px;
}
当您这样做时,您正在设置根字体大小,因此在设置字体大小时,rem
度量标准会受到其影响。
为了给之前的答案增加一个最佳实践:根字体大小应该以百分比表示。
html {
font-size: 110%;
}
这种做法会根据用户系统/浏览器设置来缩放字体。相对于其他网站,您的网站将始终保持一致的大小(假设这些网站也遵循最佳实践)。
更加尊重用户的做法是根本不要触及根字体大小,以便他们在各个网站上都有一致的阅读体验,并可可靠地使用辅助功能设置。
html
元素的字体大小设置如下。默认的html
元素字体大小为16px。rem
基准大小始终设置在html
元素上,而不是body
元素上。
<html style="font-size:16px">
<body>
<h1>Rem Sizing</h1>
</body>
</html>
html {
font-size: 16px; /* you can chose any size here 16 is default */
@media screen and (max-width: 991px) {
font-size: 62.5%;
}
@media screen and (max-width: 767px) {
font-size: 50%;
}
@media screen and (max-width: 600px) {
font-size: 45%;
}
}