我正在设计一个新的网站,我希望它能与尽可能多的浏览器和浏览器设置兼容。我试图决定我应该使用什么测量单位的字体和元素的大小,但我无法找到一个结论性的答案。

我的问题是:我应该在CSS中使用px还是rem ?

到目前为止,我知道使用px不兼容那些在浏览器中调整基本字体大小的用户。 我忽略了ems,因为与rem相比,它们在级联时维护起来更麻烦。 有人说rem是分辨率独立的,因此更可取。但也有人说,大多数现代浏览器对所有元素都一视同仁,所以使用px不是问题。

我问这个问题是因为关于CSS中最理想的距离度量有很多不同的意见,我不确定哪个是最好的。


当前回答

我发现对网站的字体大小进行编程的最好方法是为正文定义一个基本字体大小,然后对此后声明的所有其他字体大小使用em's(或rem's)。我想这是我的个人偏好,但它对我很有帮助,也让我很容易融入更具响应性的设计。

至于使用rem单元,我认为在代码的渐进性和对旧浏览器的支持之间找到一个平衡是很好的。看看这个关于浏览器支持rem单元的链接,这应该会对你的决定有很大帮助。

其他回答

我发现对网站的字体大小进行编程的最好方法是为正文定义一个基本字体大小,然后对此后声明的所有其他字体大小使用em's(或rem's)。我想这是我的个人偏好,但它对我很有帮助,也让我很容易融入更具响应性的设计。

至于使用rem单元,我认为在代码的渐进性和对旧浏览器的支持之间找到一个平衡是很好的。看看这个关于浏览器支持rem单元的链接,这应该会对你的决定有很大帮助。

Josh3736的答案很好,但要在3年后提供一个对应的答案:

I recommend using rem units for fonts, if only because it makes it easier for you, the developer, to change sizes. It's true that users very rarely change the default font size in their browsers, and that modern browser zoom will scale up px units. But what if your boss comes to you and says "don't enlarge the images or icons, but make all the fonts bigger". It's much easier to just change the root font size and let all the other fonts scale relative to that, then to change px sizes in dozens or hundreds of css rules.

我认为对于某些图像使用px单位仍然是有意义的,或者对于某些布局元素,无论设计的规模如何,都应该始终保持相同的大小。

2012年josh3736发表他的回答时,Caniuse.com可能说只有75%的浏览器支持,但截至3月27日,他们声称93.78%的浏览器支持。在他们追踪的浏览器中,只有IE8不支持。

是的。或者,更确切地说,没有。

呃,我是说,没关系。使用对您的特定项目有意义的方法。PX和EM或两者都有效,但根据整个页面的CSS架构的不同,它们的行为会有所不同。

更新:

为了澄清,我的意思是,通常情况下,使用哪一种并不重要。有时,您可能特别希望选择其中一种。如果你可以从头开始,想要使用基本字体大小,并使所有内容都与之相关,那么EMs是很好的。

当您在现有代码基础上进行重新设计时,通常需要px,并且需要px的专一性来防止糟糕的嵌套问题。

是的,REM和PX是相对的,但其他答案建议选择REM而不是PX,我也想用一个可访问性的例子来支持这一点。 当用户在浏览器上设置不同的字体大小时,REM会自动放大或缩小网页上的字体、图像等元素,而PX则不会。


在下面的gif中,左侧文本使用REM单位设置字体大小,而右侧字体使用PX单位设置。

正如你所看到的,当我调整大小时,REM会自动放大/缩小 网页的默认字体大小。(右下方)

网页的默认字体大小是16px,等于1 rem(只适用于默认的html页面,即html{font-size:100%}),因此,1.25rem等于20px。

附注:还有谁在使用REM?CSS框架!像Bootstrap 4, Bulma CSS等,所以最好与它相处。

这篇文章很好地描述了px, em和rem的优缺点。

作者最后得出结论,最好的方法可能是同时使用px和rem,在旧的浏览器中先声明px,在新浏览器中重新声明rem:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */