为何修改body字体大小后rem单位的元素尺寸未按预期缩放？

嘿，这个坑我刚接触rem的时候也踩过！你搞错了rem的依赖对象——rem单位是相对于根元素<html>的字体大小，不是<body>！

先理清楚核心逻辑： #

CSS里的「根元素」特指<html>标签，rem（Root EM）的命名就已经说明它是基于根元素的字体大小来计算的。而<body>只是页面的内容容器，它的font-size是用来给页面里的文本元素（比如<p>、<span>这类）做继承用的，和rem的计算基准完全没关系。

你的例子为什么一开始看起来“生效”了？ #

你最初给body设了font-size:16px，这时候浏览器默认的<html>字体大小也是16px（绝大多数浏览器的默认值），所以div的10rem刚好等于10×16px=160px，这巧合让你误以为rem是依赖body的。

为什么改body的font-size没用？ #

当你把body的font-size改成20px时，<html>的字体大小还是浏览器默认的16px，所以rem的计算基准没变，div的尺寸自然还是10×16px=160px和4×16px=64px，不会跟着body的设置变化。

修正后的代码示例： #

如果想让rem跟着你设置的基准缩放，应该修改<html>的font-size：

<style>
  html { font-size: 16px; } /* 这才是rem的计算基准 */
  body { font-size: 16px; } /* 这个是给页面文本继承用的，可根据需求调整 */
</style>
<body>
  <div style="width:10rem;height:4rem;background:green;"></div>
</body>

当你把<html>的font-size改成20px时，div的尺寸就会变成10×20px=200px和4×20px=80px，完全符合你的预期。

补充小知识点： #

有些响应式布局的代码会给<html>设置font-size: 62.5%，这是因为浏览器默认16px的62.5%刚好是10px，这样1rem就等于10px，方便后续计算（比如16px就是1.6rem），本质还是基于<html>的字体大小来做的。

内容的提问来源于stack exchange，提问作者stckvrw