我正在设计一个新的网站,我希望它能与尽可能多的浏览器和浏览器设置兼容。我试图决定我应该使用什么测量单位的字体和元素的大小,但我无法找到一个结论性的答案。
我的问题是:我应该在CSS中使用px还是rem ?
到目前为止,我知道使用px不兼容那些在浏览器中调整基本字体大小的用户。
我忽略了ems,因为与rem相比,它们在级联时维护起来更麻烦。
有人说rem是分辨率独立的,因此更可取。但也有人说,大多数现代浏览器对所有元素都一视同仁,所以使用px不是问题。
我问这个问题是因为关于CSS中最理想的距离度量有很多不同的意见,我不确定哪个是最好的。
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不支持。
一半(但只有一半)尖刻的回答(另一半是对官僚主义现实的痛苦蔑视):
使用vh
一切都是浏览器窗口的大小。
总是允许向下滚动,但禁用水平滚动。
将主体宽度设置为静态50vh,并且永远不要编写浮动或跳出父div的css(如果他们试图模拟一些看起来像这样的东西,聪明地使用背景gif会让他们偏离轨道)。样式只使用表,所以所有东西都按照预期严格地保持在适当的位置。包括一个javascript函数来撤销用户可能做的任何ctrl+/-活动。
用户会讨厌你,因为网站不会因为他们使用的内容而发生变化(比如文本太小,在手机上无法阅读)。你的同事会讨厌你的,因为没有哪个头脑正常的人会这么做,这很可能会影响他们的工作(当然不会影响你的工作)。你的编程教授会讨厌你,因为这不是一个好主意。你的用户体验设计师会讨厌你,因为这将暴露他们在设计用户体验模型时为了赶在最后期限前做的事情。
几乎所有人都会讨厌你,除了那些告诉你要让东西与模型匹配并快速这么做的人。然而,这些人(通常包括项目经理)会为你的准确性和快速周转时间而欣喜若狂。每个人都知道他们的意见是唯一影响你薪水的因素。
作为条件反射的回答,我建议使用rem,因为它允许您在必要时一次性更改整个文档的“缩放级别”。在某些情况下,当您希望大小相对于父元素时,请使用em。
但是对rem的支持是参差不齐的,IE8需要一个填充物,Webkit正在显示一个错误。此外,亚像素计算有时会导致单像素线等内容消失。补救办法是对这些非常小的元素进行像素编码。这就带来了更多的复杂性。
所以,总的来说,问问自己这样做是否值得——在CSS中改变整个文档的“缩放级别”有多重要,有多可能?
有些情况下答案是肯定的,有些情况下答案是否定的。
因此,这取决于您的需求,您必须权衡利弊,因为使用rem和em与“正常的”基于像素的工作流相比引入了一些额外的考虑因素。
请记住,它很容易切换(或更确切地说转换)你的CSS从px到rem (JavaScript是另一个故事),因为下面两个CSS代码块将产生相同的结果:
html {
}
body {
font-size:14px;
}
.someElement {
width: 12px;
}
html {
font-size:1px;
}
body {
font-size:14rem;
}
.someElement {
width: 12rem;
}
是的,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等,所以最好与它相处。