为什么使用rem代替px呢？

Question

好的,首先,是的,我读了很多文章(我应该在我的CSS中使用px或rem值单位吗？)和论坛.

我知道1px不是一个物理像素,而是一个CSS像素,rem基本上是相同的em,但它是相对于根元素(因此r在rem - root中),而不是父元素.em本身等于文档中设置的大小,并且由于与像素相比具有可扩展性而无法扩展,因此它很受欢迎.

在我阅读的所有文章中,每个人都喜欢rem,它应该font-size在现代浏览器中使用,但也可以px用作IE8及更低版本的后备.我看到人们使用rem的主要原因是尺寸更好,更"移动友好".现在我突然读到文章说所有现代浏览器都支持viewport,所以scalibilty不再是一个大问题.

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

因此,在所有这些混乱之后,如果scalibilty没有问题,因为视口和1rem通过html 62.5%转换为10px,加上我将使用像素作为回退,那么为什么首先使用rem而不仅仅是坚持像素？我没有看到任何使用的优点rem.

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

Answer 1

因此,经过所有研究,我得出结论,唯一的优点rem是,在浏览器设置中使用更大的默认字体大小的用户将获得正确缩放的字体大小,而px不会缩放.换句话说,使用remfor font-size,可以为您的网站添加对辅助功能的支持.

总结一下:

用一句话:rem与pxon font-size一起使用以支持可访问性.

html {
    font-size: 62.5%;
}

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

Answer 2

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

考虑那些视力不好的人。在他们的情况下，他们会将字体大小设置为 20 像素，或者对于非常差的视力可能设置为 28 像素。如果所有内容都保留在中px，那么对于具有不同需求的人来说，您的显示将不会是可变的。内容将溢出其容器，您的网站看起来会损坏。

或者，也许您可以将其与在您工作的地方拥有一台垃圾计算机有关。在我的第一份工作中，我们曾经在工厂车间使用过旧的 800x600 显示器。那些的默认字体大小是 10px。网站在他们身上看起来很糟糕，这是因为每个人都希望他们网站内容中的内容比实际占用更多的空间。

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

只是我的 2 美分（以及，人们推动而rem不是的实际原因px）。