何时选择 REM 而不是 PX？答案

【问题标题】：When to choose REM over PX?何时选择 REM 而不是 PX？
【发布时间】：2018-01-31 00:24:10
【问题描述】：

什么时候应该使用 rem 而不是 px？我看到很多文章说我应该使用 REM 来尊重用户的偏好，但示例总是说字体大小，而不是关于整个样式 - 边距、填充、边框、宽度、高度等。拿了这篇文章以 SO 为例：Should I use px or rem value units in my CSS?

所有的答案都是关于字体大小的，好的，我明白了，rem 更适合字体大小，但是其他样式呢？我看到bootstrap对容器类使用px，对col-*类使用，有什么原因吗？

我正在创建这个覆盖 Bootstrap 的默认样式的网站，我应该用 pxs 覆盖它使用 px 的地方还是应该使用 rem？

谢谢。

【问题讨论】：

“我正在创建这个网站，它会覆盖 Bootstrap 的默认样式，我应该用 pxs 覆盖它使用 px 的地方还是应该使用 rem？” 为此至少在这种情况下，我认为答案很明确——不要混合单位。如果您使用 px 覆盖元素，请继续使用 px，以免混淆。

标签： html css units-of-measurement

【解决方案1】：

在了解应该使用的 CSS 单元之前。您必须了解单位本身。因为您是唯一一个知道您想要为您的网站设置什么样式的人，例如（静态、动态/响应）。只有您可以决定使用哪个单位。因此，为了做出决定，首先要了解 css 单元的类型及其优势。这是 w3school 链接，解释所有单位，如 em、rem 等。

https://www.w3schools.com/cssref/css_units.asp

现在具体来说，定义的 rem 是为 <html> 的根元素设置的字体大小。默认情况下，<html> 根元素的字体大小为 100%，等于浏览器设置的 16px。它可以在浏览器设置中更改，也可以在 css 中使用html {font-size: 20px} 覆盖它。无论 html 标记的字体大小设置是否等于 1rem。

现在，您可以将 rem 用于填充和边距等，但不推荐使用，因为例如您已经为您的浏览器默认字体大小设置为 16px 的网站设置了填充、边距和宽度等的 rem 值。所以这一切看起来都很好并且经过调整，但是如果正在浏览您网站的用户将浏览器的默认字体大小设置为 25 像素怎么办。这将破坏您网站的设计。这就是为什么对于响应式站点，主要使用单位 %、vw/vh。至于 px 单位。它们有助于设置静态值，以便您固定大小而不是重新调整大小。

所以现在您知道要保留网站的大小了。您可以根据需要使用单位。

希望这可以帮助您理解并再次尝试理解该理论本身，然后再听取其他人对该理论的看法。 :) 编码愉快。

【讨论】：

如果正在浏览您网站的用户已将浏览器的默认字体大小设置为 25 像素，该怎么办。这会破坏您网站的设计 为什么？如果是这样，只有 font-size 放大了 25/16=156%，而不是 margin 和 padding，这会破坏网站设计吗？
不应该。因为如果您将其从 16px 更改为 10px ， .5rem 仍会从 8 转换为 5。您可能会看到一些“收缩”，但一切仍然是“相对的”