我有一个简单的问题，在哪里声明rem的基本大小？
rem
<body> <h1>Something</h1> </body>
我可以看到font-size是<body>被设置为16px，<h1>被设置为3rem，但是字体呈现为30px，而我期望的是48px。
font-size
<body>
<h1>
3rem
velaa5lx1#
表示根元素的字体大小（通常为<html>）。当在根元素font-size中使用时，它表示其初始值（常见浏览器默认值为16px，但用户定义的首选项可能会修改此值）。Source换句话说，更改html元素的字体大小，rem的计算基数也将更改。示例：
<html>
html
<html style="font-size: 10px"> ... </html>
3zwjbxry2#
rem单位基于html元素的字体大小，而不是body元素。html的默认大小 * 通常为 * 16px，但这并不保证，用户可以更改该默认值。常见的做法是在html上手动显式设置字体大小，通常为16px值，然后在其他地方使用rems设置最终显示值。但是，当用户希望或需要增加默认字体大小时，这种做法会带来可访问性问题，因此您应该设计页面和布局，以便它们能够适应不同的大小。从https://developer.mozilla.org/en-US/docs/Web/CSS/font-size开始：rem值是相对于根html元素的，而不是父元素的，换句话说，它允许你以相对的方式指定字体大小，而不受父元素大小的影响，从而消除了复合。
body
y3bcpkx13#
只需设置html元素的字体大小：
html { font-size: 10px; }
执行此操作时，您正在设置根字体大小，因此在设置字体大小时，rem测量值将受到此影响。
brgchamk4#
在前面的答案中添加最佳实践：根字体大小应表示为百分比。
html { font-size: 110%; }
这种做法会根据用户的系统/浏览器设置来缩放字体。与其他网站相比，您的网站将保持一致的大小。（假设这些网站也遵循最佳做法）。更尊重用户的是根本不改变根字体大小，这样他们在不同的网站上都有一致的阅读体验，并且可以可靠地使用辅助功能设置。
4条答案
按热度按时间velaa5lx1#
表示根元素的字体大小（通常为
<html>）。当在根元素font-size中使用时，它表示其初始值（常见浏览器默认值为16px，但用户定义的首选项可能会修改此值）。Source
换句话说，更改
html元素的字体大小，rem的计算基数也将更改。示例：
3zwjbxry2#
rem单位基于html元素的字体大小，而不是body元素。html的默认大小 * 通常为 * 16px，但这并不保证，用户可以更改该默认值。常见的做法是在html上手动显式设置字体大小，通常为16px值，然后在其他地方使用rems设置最终显示值。但是，当用户希望或需要增加默认字体大小时，这种做法会带来可访问性问题，因此您应该设计页面和布局，以便它们能够适应不同的大小。
从https://developer.mozilla.org/en-US/docs/Web/CSS/font-size开始：
rem值是相对于根html元素的，而不是父元素的，换句话说，它允许你以相对的方式指定字体大小，而不受父元素大小的影响，从而消除了复合。
y3bcpkx13#
只需设置
html元素的字体大小：执行此操作时，您正在设置根字体大小，因此在设置字体大小时，
rem测量值将受到此影响。brgchamk4#
在前面的答案中添加最佳实践：根字体大小应表示为百分比。
这种做法会根据用户的系统/浏览器设置来缩放字体。与其他网站相比，您的网站将保持一致的大小。（假设这些网站也遵循最佳做法）。
更尊重用户的是根本不改变根字体大小，这样他们在不同的网站上都有一致的阅读体验，并且可以可靠地使用辅助功能设置。