我应该在CSS中使用px或rem值单位吗?

我应该在CSS中使用px或rem值单位吗?

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

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

  • 到目前为止,我知道使用px与在浏览器中调整基本字体大小的用户不兼容。

  • 我忽视了ems,因为与rems 相比,它们更难以维持,因为它们是级联的。

  • 有人说rems与分辨率无关,因此更为理想。但是其他人说大多数现代浏览器无论如何都会平等地缩放所有元素,因此使用px不是问题。

我问这个是因为对于CSS中最理想的距离测量有很多不同的看法,我不确定哪个是最好的。


陪伴而非守候
浏览 774回答 3
3回答

宝慕林4294392

使用px。事实首先,知道每个规格,CSS&nbsp;px单元不等于一个物理显示像素是非常重要的。这一直是真的 - 即使在1996年的CSS 1规范中也是如此。CSS定义参考像素,用于测量96 dpi显示器上像素的大小。在dpi基本上不同于96dpi的显示器上(如Retina显示器),用户代理重新调整px单元,使其大小与参考像素的大小相匹配。换句话说,这种重新缩放正是1个CSS像素等于2个物理Retina显示像素的原因。也就是说,直到2010年(尽管有移动变焦的情况),px几乎总是等于一个物理像素,因为所有广泛使用的显示器都是96dpi左右。ems中指定的大小是相对于父元素的。这导致了em“复合问题”,其中嵌套元素逐渐变大或变小。例如:body&nbsp;{&nbsp;font-size:20px;&nbsp;}&nbsp;div&nbsp;{&nbsp;font-size:0.5em;&nbsp;}给我们:<body>&nbsp;-&nbsp;20px&nbsp;&nbsp;&nbsp;&nbsp;<div>&nbsp;-&nbsp;10px&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>&nbsp;-&nbsp;5px&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>&nbsp;-&nbsp;2.5px&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>&nbsp;-&nbsp;1.25px现在,所有正在使用的浏览器中都支持CSS3&nbsp;rem,它总是只相对于根html元素。意见我想每个人都同意,设计你的页面以适应每个人,并考虑视障人士是好的。其中一个考虑因素(但不是唯一的考虑因素!)允许用户使您网站的文字更大,以便更容易阅读。在开始时,为用户提供缩放文本大小的方法的唯一方法是使用相对大小单位(例如ems)。这是因为浏览器的字体大小菜单只是改变了根字体大小。因此,如果您指定了字体大小px,则在更改浏览器的字体大小选项时,它们将无法缩放。现代浏览器(甚至是不那么现代的IE7)都将默认缩放方法改为简单地放大所有内容,包括图像和盒子大小。实质上,它们使参考像素变大或变小。是的,有人仍然可以改变自己的浏览器默认样式表来调整默认字体大小(旧式字体大小选项的等价物),但是这是绕了一个非常深奥的方式,我敢打赌没有人1做的。(在Chrome中,它隐藏在高级设置,Web内容,字体大小。在IE9中,它更加隐藏。您必须按Alt键,然后转到视图,文本大小。)选择缩放选项更容易浏览器的主菜单(或使用Ctrl+&nbsp;+/&nbsp;-/鼠标滚轮)。1 - 在统计误差范围内,自然而然如果我们假设大多数用户使用缩放选项缩放页面,我发现相对单位大多不相关。当在同一单元中指定所有内容(图像都以像素为单位处理)时,开发页面要容易得多,而且您不必担心复合。(“我被告知不会有数学”&nbsp;- 有必要计算1.5em实际上有用的东西。)仅使用相对单位表示字体大小的另一个潜在问题是,用户调整大小的字体可能会破坏您的布局所做的假设。例如,这可能会导致文本被裁剪或运行时间过长。如果使用绝对单位,则不必担心意外的字体大小会破坏布局。所以我的答案是使用像素单位。我px用于一切。当然,您的情况可能会有所不同,如果您必须支持IE6(可能是RFC的众神怜悯您),您仍然必须使用ems。
打开App,查看更多内容
随时随地看视频慕课网APP