我正在设计一个新的网站,我希望它能与尽可能多的浏览器和浏览器设置兼容。我试图决定我应该使用什么测量单位的字体和元素的大小,但我无法找到一个结论性的答案。
我的问题是:我应该在CSS中使用px还是rem ?
到目前为止,我知道使用px不兼容那些在浏览器中调整基本字体大小的用户。
我忽略了ems,因为与rem相比,它们在级联时维护起来更麻烦。
有人说rem是分辨率独立的,因此更可取。但也有人说,大多数现代浏览器对所有元素都一视同仁,所以使用px不是问题。
我问这个问题是因为关于CSS中最理想的距离度量有很多不同的意见,我不确定哪个是最好的。
一半(但只有一半)尖刻的回答(另一半是对官僚主义现实的痛苦蔑视):
使用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;
}
一半(但只有一半)尖刻的回答(另一半是对官僚主义现实的痛苦蔑视):
使用vh
一切都是浏览器窗口的大小。
总是允许向下滚动,但禁用水平滚动。
将主体宽度设置为静态50vh,并且永远不要编写浮动或跳出父div的css(如果他们试图模拟一些看起来像这样的东西,聪明地使用背景gif会让他们偏离轨道)。样式只使用表,所以所有东西都按照预期严格地保持在适当的位置。包括一个javascript函数来撤销用户可能做的任何ctrl+/-活动。
用户会讨厌你,因为网站不会因为他们使用的内容而发生变化(比如文本太小,在手机上无法阅读)。你的同事会讨厌你的,因为没有哪个头脑正常的人会这么做,这很可能会影响他们的工作(当然不会影响你的工作)。你的编程教授会讨厌你,因为这不是一个好主意。你的用户体验设计师会讨厌你,因为这将暴露他们在设计用户体验模型时为了赶在最后期限前做的事情。
几乎所有人都会讨厌你,除了那些告诉你要让东西与模型匹配并快速这么做的人。然而,这些人(通常包括项目经理)会为你的准确性和快速周转时间而欣喜若狂。每个人都知道他们的意见是唯一影响你薪水的因素。