如何设置rem的基础大小

Question

如何设置rem的基础大小

90

我有一个简单的问题，rem的基础大小是从哪里声明的？

<body>
  <h1>Something</h1>
</body>

我可以看到在<body>中设置了font-size为16px，而<h1>设置为3rem，但是字体呈现为30px，而我期望的是48px。是否有任何父级可重新定义基础？

- Jeremy Thomas

2

“rem” 是相对于根元素的单位，即 “html” 元素。 - sol

6个回答

27

rem单位基于html元素的字体大小，而不是body元素。默认大小通常在html上为16px，但这并不保证，用户可以更改该默认值。一种常见做法是在html上手动设置字体大小，并将其显式设置为16px值，然后在其他地方使用rems来设置最终显示值。

然而，这种做法存在无障碍问题，因为当用户想要或需要增加默认字体大小时，页面和布局应该能够适应不同的尺寸。

来自https://developer.mozilla.org/en-US/docs/Web/CSS/font-size：

rem值相对于根html元素而不是父元素。换句话说，它让您以相对方式指定字体大小，而不会受到父级大小的影响，从而消除了复合效应。

- davethegr8

4

只需设置html元素的字体大小：

html {
    font-size: 10px;
}

当您这样做时，您正在设置根字体大小，因此在设置字体大小时，rem度量标准会受到其影响。

- CHALK100

当您这样做时，您正在设置根字体大小，因此在设置字体大小时，rem度量将受到影响。 - CHALK100

1

这就是你应该在答案中写的东西。 - General Grievance

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Akshay

3

为了给之前的答案增加一个最佳实践：根字体大小应该以百分比表示。

html {
    font-size: 110%;
}

这种做法会根据用户系统/浏览器设置来缩放字体。相对于其他网站，您的网站将始终保持一致的大小（假设这些网站也遵循最佳实践）。

更加尊重用户的做法是根本不要触及根字体大小，以便他们在各个网站上都有一致的阅读体验，并可可靠地使用辅助功能设置。

- Erik van Velzen

2

将html元素的字体大小设置如下。默认的html元素字体大小为16px。rem基准大小始终设置在html元素上，而不是body元素上。

<html style="font-size:16px">
<body>
     <h1>Rem Sizing</h1>
</body>
</html>

- championac

第一篇贴子的格式非常好！ - Darren Griffith

0

页面的根元素是html，我们需要指定该元素的大小，因为我们希望所有其他大小都以rem单位表示。 html元素的默认字体大小为16px，这将被视为1rem。

基于SCSS的示例：

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%;
  }
}

您可以根据您的使用情况调整百分比。

- Muhammad Azam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TimoStaudinger · Accepted Answer

rem

表示根元素(通常是<html>)的字体大小。当在根元素的字体大小内使用时，它表示其初始值(一个常见的浏览器默认值是16px，但用户定义的偏好可能会修改这个值)。

来源

换句话说，改变你的html元素的字体大小，rem的计算基础也会随之改变。

例如：

<html style="font-size: 10px">
...
</html>