在CSS中,em和px有什么区别?


回答 1:

最后是所有像素

最终,Web浏览器告诉操作系统告诉显示驱动程序在屏幕上以像素为单位放置某些内容。

但是,该“像素”是物理像素。 这就是我们所说的“设备像素”。

您不是在谈论“设备像素”。 您正在谈论CSS像素。

CSS像素!==像素

“ CSS像素”大致类似于设备像素。[1] CSS像素依赖于“参考像素”的概念,即在像素密度为96dpi的设备上,距手臂一臂之遥的视角。[2]通过数学的力量,“参考像素”可能最终会在屏幕上为1.3毫米。 但是,有很多原因可能并非如此。

重要的是,我们从px并不表示“屏幕上的像素”这一基本点开始。

CSS中有不同的度量单位

度量单位有两个主要类别[3]:

  1. 绝对单位相对单位

如果它是“绝对单位”,则该度量单位与物理世界中的某物有关系。

如果是相对单位,则将值计算为绝对单位。

所以px vs em

px是“绝对单位”; CSS引擎将告诉浏览器使用该“长度”进行大小调整。 浏览器和操作系统将整理长度与“设备像素”的比较并进行渲染。 Px与我们前面提到的“参考像素”具有静态关系。 px它不会改变。

em是“相对单位”。 CSS引擎将首先将该值计算为像素长度。 在计算出像素长度之后,它将把计算出的值发送到浏览器。 特别是,em是基于包含元素的相对字体大小计算的。 em的值可以改变; 如果更改任何父元素的字体大小,将影响em的值。

想到em的最好方法是假装em位不存在,并将值当作乘数。 例如:

.foo {font-size:1.5em; / *令人困惑* / font-size:1.5; / *无效,但是应该完全代替它来调用em * / line-height:1.5; / *查看行高如何接受无单位乘数? * /}

因此,第一个大区别是,一个是绝对的,另一个是相对的。

px和em在应用程序中

不同的情况将突出每个单元的优缺点[4]。

由于px是绝对测量单位,因此您对屏幕上显示的内容具有很高的可预测性。 但是,你没有相称性。 如果在父级中调整字体大小,则不会重新计算以px为单位的属性。

所以您遇到了很多:

正文{font-size:16px;} h1 {font-size:32px; / *字体大小的绝对单位* /填充:8px 16px; / *用于填充的绝对单位* /} .foo {font-size:12px; / *在父级中调整字体大小* /} / *编写新的规则集以使内容保持比例* / .foo h1 {font-size:24px; / *重写字体规则以使h1 2x正常* /填充:6px 12px; / *重写1/4和1/2 * /}

由于em是基于继承的字体大小的相对单位,因此对于屏幕上显示的内容,您可能具有较低的可预测性-特别是在大型团队中。 但是您将具有很高的比例性; 如果在父级中调整字体大小,则em中大小的属性将重新计算。

正文{font-size:16px;} h1 {font-size:2em; / *相对单位* /填充:.25em .5em; / *用于填充的相对单位* /} .foo {font-size:.75em; }

因此,您已经节省了使用em编写整个规则集的过程。 字体大小计算为24px,填充文本计算为6px 12px。

因此,最大的区别是能够按比例分配大小的能力-无需编写更多代码!

脚注

[1]语法和基本数据类型

[2] CSS值和单位模块级别3

[3] CSS中的“ em”,“ px”和“%”有何不同?

[4]自适应网站都是关于如何衡量的(在CSS中)


回答 2:

px是像素。 在不同的浏览器中可能会稍有不同,但在相同环境中以及给定浏览器/设备上的整个站点中可能会保持一致。 px适用于线条和边框宽度之类的东西。

em与当前元素的字体大小相同(通常是继承的)。 因此,随着字体大小的更改,em的值也随之更改。 当您要相对于文本的当前大小间隔一些内容时,这非常方便。 它也很有用,因为它是相对于其他内容而言的,因此它更有可能在所有屏幕上运行。 em在设置文本的间距,边距和填充时特别有用。

雷姆是根em。 它就像em一样,但不是相对于当前字体大小,而是相对于原始文档字体大小。 这意味着无论当前字体如何,rem在整个页面上都将保持一致。 在许多情况下,rem更易于使用,因为它更容易预测。 对于需要在整个文档中保持一致的边距,即使元素之间的局部字体大小发生了变化,它也特别有意义。

通常,em和rem易于在页面中维护,目前的普遍共识是使用em和rem而不是px。 普遍的共识并不总是正确的,但是除非您有充分的理由要做其他事情,否则这是一个不错的选择。


回答 3:

px是像素。 在不同的浏览器中可能会稍有不同,但在相同环境中以及给定浏览器/设备上的整个站点中可能会保持一致。 px适用于线条和边框宽度之类的东西。

em与当前元素的字体大小相同(通常是继承的)。 因此,随着字体大小的更改,em的值也随之更改。 当您要相对于文本的当前大小间隔一些内容时,这非常方便。 它也很有用,因为它是相对于其他内容而言的,因此它更有可能在所有屏幕上运行。 em在设置文本的间距,边距和填充时特别有用。

雷姆是根em。 它就像em一样,但不是相对于当前字体大小,而是相对于原始文档字体大小。 这意味着无论当前字体如何,rem在整个页面上都将保持一致。 在许多情况下,rem更易于使用,因为它更容易预测。 对于需要在整个文档中保持一致的边距,即使元素之间的局部字体大小发生了变化,它也特别有意义。

通常,em和rem易于在页面中维护,目前的普遍共识是使用em和rem而不是px。 普遍的共识并不总是正确的,但是除非您有充分的理由要做其他事情,否则这是一个不错的选择。