为字体大小以外的元素计算 REM

Posted 2023-03-06

【中文标题】为字体大小以外的元素计算 REM

【英文标题】：Calculating REM for elements other than font-size

【发布时间】：2021-11-14 02:09:54

【问题描述】：

#sign-up-cta .striking 
  font-family: "Rubik", sans-serif;
  padding-bottom: .75rem;

如果我们将rem 用于padding 或margin，它从哪里获取默认值？那么如果我们确实声明了padding: 0 和margin: 0，那么它从哪里获取值呢？

上面的例子.75rem是针对文本的位置。如果我们不声明padding 或margin，.75rem 会是什么？

【问题讨论】：

它从 html 标签中获取

是什么让您认为 margin 或 padding 与 1rem 最初的含义有任何有关？

REM 来自根元素 (html)。 EM 从父元素中获取其值。

@CBroe 我有一个项目，我现在正在尝试完成，除了字体大小之外还有很多使用 REM 的东西。我读过一篇文章说，如果你在任何地方使用 REM 可能会导致问题。据我所知，我看到我们应该只将它与 font-size 一起使用，并将 % 或 px 与其他元素一起使用。

@Dejan.S 这就是我学到的。我很困惑为什么这个项目在 REM 中有这么多元素。我很好奇html的默认值。我知道 16px 应该是字体大小的默认值，但其他所有内容的默认值是什么。

【参考方案1】：

rem 单位等于 html 元素的 font-size，您可以在项目中定义或由用户的浏览器设置定义。所有浏览器的默认值都是 16px（据我所知）。

如果您想在项目中的任何地方使用相同的单元，同时通过适应用户自定义设置的浏览器字体大小来保持响应式设计，则使用 Rem。

【讨论】：

这就是我所学到的，似乎最好的做法是仅将 rem 用于字体大小，而将其他所有内容与 % 和 px 一起使用。谢谢你的澄清。

@webdevtonym 我希望您没有阅读我的帖子，因为 REM 仅适用于字体大小。我的观点是，如果你有 1rem 并且你的 html 标签有font-size: 18; 1rem = 18px。关于您对 % 和 px 的评论，不是真的，一点也不。 Rem 应该用于除少数情况之外的所有实例，例如边框 (px)。 PX 不好用，因为它是一个固定值，对浏览器缩放之类的东西没有反应。在我看来，% 是一种在 flex 和 grid 之前进行响应式设计的老方法。

@webdevtonym 这不是我的意思。您通常可以将 rem 用于您想要统一单位的所有内容。假设您在两个不同大小的容器中有两个按钮。如果您使用em 或% 作为按钮的大小，您可以获得两个不同大小的按钮。 % 是相对于父元素的大小，em 是相对于元素的字体大小。这就是您使用rem 的原因，因此您可以按相同的单位调整对象的大小（默认为1 rem = 16px）。建议避免使用px

@Dejan.S px 不响应浏览器缩放是什么意思？看this。我很确定这是使用 px 标记的，并且缩放得很好。另外我认为堆栈溢出正在使用 px，因为更改浏览器字体大小不会改变网站缩放比例。

@NHerwich 当然浏览器确实在这方面做得更好（顺便说一句，链接使用 em 作为度量单位）。今天（实际上是 5-6 年前）建立网站的大多数情况仍然是使用相对单位，并且还会有更多新单位出现。如果您将边距/填充设置为 rem 将随它缩放并且您不必更改任何内容，那么网站对于更大的屏幕具有更大的字体大小并不少见，如果您设置 px 则不会。 smashingmagazine.com 就是一个很好的例子，css-tricks.com。