何时选择 REM 而不是 PX?

问题描述 投票:0回答:2

什么时候应该使用 rem 而不是 px?我看到很多文章说我应该使用 REM 来尊重用户的偏好,但示例总是说字体大小,而不是整个样式 - 边距、填充、边框、宽度、高度等。例如:我应该在 CSS 中使用 px 或 rem 值单位吗?

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

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

谢谢你。

html css units-of-measurement
2个回答
13
投票

在讨论应该使用什么 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 进行填充和边距等,但不建议这样做,因为例如您已经为您的网站设置了填充、边距和宽度等的 rem 值,其中浏览器默认字体大小设置为 16px。所以一切看起来都很好并且经过调整,但是如果浏览您网站的用户将浏览器的默认字体大小设置为 25 像素怎么办?这会破坏您网站的设计。这就是为什么对于响应式网站,大多数使用单位 %、vw/vh。至于px单位。它们可以帮助设置静态值,以便您固定大小而不是重新调整大小。

现在您知道您想要保持网站的大小了。您可以根据需要使用这些单位。

希望这有助于您的理解,并且在接受其他人对该理论的看法之前,再次尝试理解该理论本身。 :) 快乐编码。


0
投票

Rem 单位会自动调整到屏幕宽度,它还有很多其他优点,您可以在 pxcoding.com/convert-px-to-rem/ 中查看这些优点,并将 css 文件中的所有 px 转换为 rem 值

© www.soinside.com 2019 - 2024. All rights reserved.