px、em 和 ex 有啥区别？

Posted 2023-03-06

【中文标题】px、em 和 ex 有啥区别？

【英文标题】：What is the difference between px, em and ex?px、em 和 ex 有什么区别？

【发布时间】：2011-01-24 01:22:16

【问题描述】：

px、em 和 ex 有什么区别？而当你在CSS中定义font-size的时候，你是用px、pt还是em？

【问题讨论】：

相关和可能的重复：***.com/questions/1932773/should-i-use-em-or-px、***.com/questions/348978/…、***.com/questions/132685/font-size-in-css-or-em、***.com/questions/609517/why-em-instead-of-px。

【参考方案1】：

px,em 和 ex 有什么区别？

http://www.w3.org/TR/CSS21/syndata.html#length-units 描述了 CSS 中可用的那些长度单位和其他长度单位

当你在 css 中定义 font-size 时，我是使用 px、pt 还是 em？

根据经验，在屏幕上使用百分比并在打印时使用 pt。

【讨论】：

我认为使用 em 或 ex 比高度依赖于文本的对齐的百分比更好，因为这些值对应于字体大小。

@dbmikus — ex 有点奇怪，大多数人不想用这些术语来表示字体大小。 1em 正好是 100%，所以相关性是完全一样的。一些较旧的浏览器（并注意写答案的时间）在以 em 为单位的字体大小方面存在问题，因此百分比明显优越。这些天来已经不那么重要了。

【参考方案2】：

em：相关字体的font-sizeex：相关字体的x-heightpx : 像素，相对于观看设备

【讨论】：

x-height 是什么？是“x”字符的高度吗？

@anton_rh - 完全正确，x-height 是从基线到中位数的距离。这也是小写 x 的高度。视觉：en.wikipedia.org/wiki/X-height#/media/…

【参考方案3】：

像素 (px) 取决于浏览器。它是您在屏幕上看到的绝对大小。 Em 有点像百分比。 Ems 指的是基本文本大小。 1 em 的值与100 percent 的值含义相同。但您也可以反过来说：百分比值只是 em 乘以 100。 Points(pt) 是您希望在印刷媒体中使用的。

【讨论】：

你不是说像素是依赖于屏幕的吗？它们在您使用的任何浏览器上看起来都一样，但会根据屏幕/显示设置单独而改变。

与百分比的平行是非常容易引起误解的，因为百分比与字体大小没有继承关系

@JanusTroelsen — 在处理字体大小时。

这个答案忽略了三分之一的问题：ex（当然，它与em 密切相关，在谈论字体大小时可能没有太大意义，但这不是忽略它的理由）。

@Jasper，我同意我查看了这个答案，希望只是为了找到 em 和 ex 之间的区别

【参考方案4】：

CSS 长度单位：

绝对

：英寸（

in

）、厘米（

cm

）、毫米（

mm

）、点（

pt

)、picas (

pc

)

点是标准的印刷测量，打印机和排字机使用了几十年，文字处理程序使用了很多年。传统上，一英寸有 72 个点（点是在公制广泛使用之前定义的）。因此，设置为 12 磅的文本的大写字母应为六分之一英寸高。例如，p font-size: 18pt; 等价于 p font-size: 0.25in;。

Picas 是另一个印刷术语。一个皮卡相当于 12 个点，这意味着一英寸有 6 个皮卡。如图所示，设置为 1 pica 的文本的大写字母应该是六分之一英寸高。例如，p font-size: 1.5pc; 会将文本设置为与点定义中的示例声明相同的大小。

只有当浏览器知道显示您的页面的监视器、您正在使用的打印机或任何其他用户代理可能应用的所有详细信息时，这些单元才真正有用。在 Web 浏览器上，显示受显示器尺寸和显示器设置的分辨率的影响，作为作者，您对这些因素无能为力。 绝对单位在定义打印文档的样式表时更有用，在这种情况下，以英寸、点和皮卡来衡量事物是很常见的。正如您所见，尝试在网页设计中使用绝对测量值充其量是危险的。

相对

：

em

（em-height）、

ex

（e-height）、

px

。前两个代表和“x-height”，它们是常见的印刷测量；但是，在 CSS 中，如果您熟悉排版，它们的含义可能会出乎您的意料。

em：一个“em”被定义为给定字体的 font-size 值。如果一个元素的字体大小为 14 像素，那么对于该元素，1em 等于 14 像素。

ex：指所用字体中小写x的高度。因此，如果您有两个文本大小为 24 磅的段落，但每个段落使用不同的字体，那么每个段落的 ex 值可能不同。这是因为不同的字体对于 x 有不同的高度

px：显示器中的微小颜色框是像素。一般来说，如果你声明像 font-size: 18px 这样的东西，网络浏览器几乎肯定会在你的显示器上使用实际像素，它们已经存在，但在其他显示设备上，如打印机，用户代理必须将像素长度重新调整为更合理的值。换句话说，打印代码必须计算出一个像素中有多少个点，为此，它可能会使用 96ppi 参考像素。

结论

由于这种重新缩放的潜力，像素被定义为相对测量单位，尽管在网页设计中，它们的行为很像绝对单位。

Rrefrence: css the definite guid by eric meyer

【参考方案5】：

em ：em 是用于网络文档媒体的可扩展单元。一个 em 等于当前的 font-size，例如，如果文档的 font-size 为12pt，则1em 等于12pt。

px ：像素是用于屏幕媒体（即在计算机屏幕上读取）的固定尺寸单位。一个像素等于计算机屏幕上的一个点（屏幕分辨率的最小单位）。

pt ：点传统上用于印刷媒体（任何要印刷在纸上的东西等）。一点等于 1/72 英寸。点很像像素，因为它们是固定大小的单位，不能按大小缩放。

【讨论】：

请引用您的来源。