为什么在相同的情况下使用 rem 而不是 px？

Question

好的，首先，是的，我已经阅读了很多关于此的文章 (Should I use px or rem value units in my CSS?) 和论坛。

我知道1px不是物理像素而是CSS像素，而rem和em基本相同，只是相对于根元素（因此 r in rem - root)，而不是父元素。 em本身等于文档中设置的大小，相对于pixel不能缩放的可缩放性，所以比较流行

在我读到的所有文章中，每个人都喜欢 rem，它应该用于现代浏览器中的 font-size，但也使用 px 作为 IE8 及更低版本的后备。我看到人们使用 rem 的主要原因是尺寸缩放得更好并且更大 "mobile friendly"。现在我突然看到文章说所有现代浏览器都支持viewport，所以可扩展性不再是一个大问题。

然后我阅读以正确地将 rem 转换为 px，反之亦然，我们可以使用 html { font-size: 62.5%; }，然后将 1rem 转换为 10px。

所以在所有这些混乱之后，如果由于视口的原因，可伸缩性没有问题，并且 1rem 通过 html 62.5% 转换为 10px，而且无论如何我都会使用像素作为后备，那么为什么要使用 rem第一名而不只是坚持使用像素？我看不到使用 rem 有任何好处。

还是我错过了 rem 的一些主要优势？

Answer 1

只有当浏览器的默认 font-size 保留为默认 16px 时，62.5% 才有效。仅仅因为你，作为一个正常的健全人（或者至少是一个视力正常的人）有 font-size 的默认设置，你不能假设这适用于广大民众。

考虑那些视力不好的人。在他们的例子中，他们会将字体大小设置为 20px，或者可能是 28px（因为视力很差）。如果一切都保持在 px，那么对于那些有不同需求的人来说，你的显示就不会是 mutable。内容将溢出其容器，您的网站将看起来破烂不堪。

或者，也许你可以联想到在你工作的地方有一台垃圾电脑。在我的第一份工作中，我们曾经在工厂车间使用过旧的 800x600 显示器。它们的默认字体大小是 10px。网站在他们身上看起来很糟糕，这是因为每个人都希望他们网站内容中的内容比实际消耗更多 space。

显而易见的解决方案是让布局响应内容。 font-size 是浏览器会根据用户的偏好自行将 table 带到 table 的少数元素之一。由于该用户是您的受众，您最好尊重他们的偏好，因为您希望他们继续访问您的网站，而不是在他们访问时讨厌使用它。

只是我的 2¢（好吧，人们推动 rem 而不是 px 的真正原因）。

Answer 2

所以经过所有的研究，我得出的结论是 rem 的唯一优点是，在浏览器设置中使用更大的默认字体大小的用户将得到缩放的字体大小正确，而 px 不会缩放。换句话说，将 rem 用于 font-size，为您的网站添加对 Accessibility 的支持。

总结一下：

rem 是一种向您的网站添加对 Accessibility 支持的方法。
请记住，大多数用户在浏览器和手机中使用缩放而不是字体大小更改，因为缩放更易于访问。
浏览器缩放对 em 有额外的影响，换句话说，它平等地缩放 rem 和 px。
自 2012 年以来，rem 受到桌面和移动设备上所有主要浏览器的支持。
使用 px 作为 IE8 及更低版本的回退选项。
虽然 W3C 未指定，但桌面和移动设备上的所有浏览器都实现了默认的 font-size16 像素（您可以随意选择 Google），等于 1rem /em
为了使 px 和 rem 之间的转换更容易，您可以使用 html {font-size: 62.5%;} 将 10px 转换为 1rem

一句话：在 font-size 上使用 rem 和 px 以支持辅助功能。

html {
    font-size: 62.5%;
}

.your_class {
    font-size: 16px;
    font-size: 1.6rem;
}

Answer 3

我们应该使用 rems 或 em，因为它们是基于字体大小的。这可能看起来有点奇怪，但这样做我们可以构建更健壮的响应式布局，因为只需更改字体大小，我们就会自动更改长度。

因为它取决于字体大小，这给了我们很大的灵活性，而且这是一项很棒的技术。

为什么在相同的情况下使用 rem 而不是 px？

Why use rem instead px when it's the same anyway?

html

css

pixel

viewport