何时选择REM over PX?

时间:2017-08-22 16:00:09

标签: html css css3 units-of-measurement

我什么时候应该使用rem而不是px?我看到很多文章说我应该使用REM来尊重用户偏好,但是示例总是说有关字体大小,而不是关于整个样式 - 边距,填充,边框,宽度,高度等等。例如:Should I use px or rem value units in my CSS?

所有答案都是关于字体大小的说法,好吧,我明白了,rem对于font-size更好,但其他样式呢?我看到引导程序使用px到容器类,到col- *类,是否有原因?

我创建此网站会覆盖Bootstrap的默认样式,我应该覆盖px使用px的地方还是应该使用rem?

谢谢。

1 个答案:

答案 0 :(得分:2)

在进入你应该使用的css单位之前。您必须了解单位本身。因为您是唯一知道您希望为您的网站设计样式的人,例如(静态,动态/响应)。只有您可以决定使用哪个单位。因此,为了做出决定,首先要了解css单元的类型及其优点。这是w3school链接,解释了所有单位,如emrem等。

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

现在特别提到你的观点,rem定义的是为<html>的根元素设置的字体大小。默认情况下,<html>根元素的字体大小为100%,等于浏览器设置的16px。它可以在浏览器设置中更改,也可以使用html {font-size: 20px}在css中覆盖它。无论html标签的字体大小集等于1 rem。

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

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

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