如何设置 rem 的基本尺寸答案

【问题标题】：How to set base size for rem如何设置 rem 的基本尺寸
【发布时间】：2018-07-05 05:26:44
【问题描述】：

我有一个简单的问题，你在哪里声明 rem 计算的基本大小？

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

我可以看到 font-size 是 <body> 设置为 16 像素，<h1> 设置为 3rem，但字体渲染为 30 像素，而我预计为 48 像素。任何父母都可以重新定义基础吗？

【问题讨论】：

标签： css

【解决方案1】：

雷姆

表示根元素的字体大小（通常为<html>）。在根元素 font-size 中使用时，它表示其初始值（常见的浏览器默认值为 16px，但用户定义的首选项可以修改这个）。

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

例子：

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

【讨论】：

【解决方案2】：

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

但是，当用户想要或需要增加默认字体大小时，这种做法存在可访问性问题，因此您应该设计页面和布局，以便它们可以适应不同的大小。

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

【讨论】：