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

Question

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

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

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

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

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

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

Answer 1

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

总结:

• rem 是一种添加对 Accessibility 支持的方法到您的网站。
• 请记住，大多数用户在浏览器和手机中使用缩放而不是字体大小更改，因为缩放更易于访问。
• 浏览器缩放对 em 有额外的影响，换句话说，它同样缩放 rem 和 px。
• 自 2012 年以来，桌面和移动设备上的所有主要浏览器都支持 rem。
• 使用 px 作为 IE8 及更低版本的回退选项。
• 虽然 W3C 没有指定，但所有桌面和移动设备上的浏览器都实现了默认的 font-size16px(您可以自行谷歌)，这等于 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;
}