当字体大小改变时，使用 REM 单元来确保其在屏幕上的位置不变？

Question

我试图了解 REM 单元用于元素定位时的行为。虽然像素 (px) 无论字体大小如何都保持固定位置，但使用 REM 似乎总是锁定元素的屏幕位置。我预计 REM 单元会根据根字体大小导致定位发生一些变化。有人可以解释使用 REM 进行定位之间的关系以及它如何影响元素的屏幕位置吗？

Answer 1

CSS中的rem单位意思是“root em”，它是相对于根元素（element）的字体大小而言的。 根字体大小默认为 16px，因此 1rem 等于 16px，除非被 CSS 覆盖。 当使用 rem 单位时，位置将根据根字体大小计算。如果根字体大小发生变化（使用媒体查询），元素的位置也会发生变化。 假设您没有更改根字体大小： top：1rem 会将元素定位在距顶部 16px (1 * 16px) 的位置。

这就是更改根字体大小的方法：

html {
    font-size: 10px;
}

现在 top：1rem 会将元素定位在距顶部 16px (1 * 10px) 的位置。