什么是px、em和ex的区别？在CSS中定义字体大小时，应该使用px、pt还是em？
px、em和ex有什么区别？
57
- manraj82
1
4相关问题和可能的重复：https://dev59.com/tnI-5IYBdhLWcg3wR2Nr, https://dev59.com/R3RC5IYBdhLWcg3wSu97, https://dev59.com/knVC5IYBdhLWcg3w-WOs, https://dev59.com/x3RB5IYBdhLWcg3weXOX.请使用 em 或者 rem 作为字体大小单位，而不是 px。因为 em 和 rem 可以适应父元素的字体大小，并且可以方便地进行调整。使用固定单位像素（px）可能会导致布局问题，特别是在高 DPI 设备上。 - ЯegDwight
4个回答
47
em：相关字体的
字号
ex：相关字体的x高度
px：像素，相对于浏览设备
- Shivkant
2
2什么是“x-height”？它是指“x”字符的高度吗？ - anton_rh
1@anton_rh - 没错，x高度是基线到中线的距离。这也是小写字母x的高度。可视化：https://en.wikipedia.org/wiki/X-height#/media/File:Typography_Line_Terms.svg - Paul
27
px是浏览器相关的绝对单位，它是您在屏幕上看到的尺寸。em是一种类似于百分比的单位。em指的是基本文本大小。1 em的值与100％的值相同。 但也可以反过来说：百分比值只是em乘以100。pt是在印刷媒体中使用的单位。
- Joshua Partogi
6
4你的意思是像素是取决于屏幕的吗？无论你使用什么浏览器，它们看起来都一样，但取决于屏幕/显示器的设定而改变。 - Camilo Martin
6与百分比平行的概念非常误导，因为百分比并不与字体大小内在相关。 - Janus Troelsen
@JanusTroelsen — 当处理字体大小时，这是必须的。 - Quentin
19这个答案忽略了问题的三分之一：
ex（它肯定与em有很强的关联，并且在谈论字体大小时可能没有太多意义，但这并不是忽视它的理由）。 - Jasper6@Jasper，我同意。我希望在这个答案中找到
em和ex之间的区别。 - user100896321
em 不是百分比。 font-size:1em 可能与 font-size:100％ 有相同的效果，但 1em 和 100％ 在其他地方具有不同的效果并且基本上意义不同。 em 是当前字体大小。 font-size:1em 之所以与 font-size:100％ 具有相同的效果，是因为在该上下文中的百分比被解释为 1em 的百分比。 因此，答案只是描述了当 font-size 属性具有百分比值时如何解释它。 - randy23
CSS长度单位：
- 绝对单位：英寸（in），厘米（cm），毫米（mm），点（pt），派卡（pc）
“点”是标准的排版测量单位，几十年来一直被印刷商和排版人员使用，并且多年来也被文字处理程序所采用。传统上，一英寸等于72点（在广泛使用公制系统之前，点的定义就已经存在）。因此，设置为12点的文本的大写字母应该是六分之一英寸高。例如，p {font-size: 18pt;} 等同于 p {font-size: 0.25in;}。
“派卡”是另一个排版术语。一派卡等于12点，也就是说一英寸等于6派卡。正如上面所示，设置为1派卡的文本的大写字母应该是六分之一英寸高。例如，p {font-size: 1.5pc;} 将使文本的大小与点的定义中的示例声明相同。
这些单位只有在浏览器了解页面显示的监视器的所有细节、您使用的打印机或其他可能适用的用户代理时才真正有用。在Web浏览器上，显示受监视器的大小和分辨率的影响，作为作者，您对这些因素无能为力。在定义打印文档的样式表时，绝对单位更加有用，其中以英寸、点和派卡为单位进行测量是常见的。正如您所见，尝试在Web设计中使用绝对测量是非常危险的。
相对单位：em（em高度）、ex（x高度）、px。前两个代表常见的排版测量单位，即“em高度”和“x高度”；然而，在CSS中，如果您熟悉排版，它们可能有意想不到的含义。
em：一个“em”被定义为给定字体的“字号”值。如果一个元素的字号为14像素，那么对于该元素，1em等于14像素。 ex：指的是所使用字体中小写x的高度。因此，如果有两个段落的文字大小都是24点，但每个段落使用不同的字体，那么每个段落的ex值可能是不同的。这是因为不同的字体对x的高度有所不同。 px：显示器上的像素是一小块颜色方块。一般来说，如果你声明类似于font-size: 18px的样式，网页浏览器几乎肯定会在你的显示器上使用实际的像素，因为它们已经存在。但对于其他显示设备，比如打印机，用户代理程序将需要将像素长度重新缩放为更合理的单位。换句话说，打印代码必须计算出一个像素中有多少个点，为此，它可能使用96ppi的参考像素。 结论 由于可能需要重新缩放，像素被定义为相对单位，尽管在网页设计中，它们的行为与绝对单位类似。 参考资料：《CSS权威指南》（Eric Meyer著）
- 绝对单位：英寸（in），厘米（cm），毫米（mm），点（pt），派卡（pc）
“点”是标准的排版测量单位，几十年来一直被印刷商和排版人员使用，并且多年来也被文字处理程序所采用。传统上，一英寸等于72点（在广泛使用公制系统之前，点的定义就已经存在）。因此，设置为12点的文本的大写字母应该是六分之一英寸高。例如，p {font-size: 18pt;} 等同于 p {font-size: 0.25in;}。
“派卡”是另一个排版术语。一派卡等于12点，也就是说一英寸等于6派卡。正如上面所示，设置为1派卡的文本的大写字母应该是六分之一英寸高。例如，p {font-size: 1.5pc;} 将使文本的大小与点的定义中的示例声明相同。
这些单位只有在浏览器了解页面显示的监视器的所有细节、您使用的打印机或其他可能适用的用户代理时才真正有用。在Web浏览器上，显示受监视器的大小和分辨率的影响，作为作者，您对这些因素无能为力。在定义打印文档的样式表时，绝对单位更加有用，其中以英寸、点和派卡为单位进行测量是常见的。正如您所见，尝试在Web设计中使用绝对测量是非常危险的。
相对单位：em（em高度）、ex（x高度）、px。前两个代表常见的排版测量单位，即“em高度”和“x高度”；然而，在CSS中，如果您熟悉排版，它们可能有意想不到的含义。
em：一个“em”被定义为给定字体的“字号”值。如果一个元素的字号为14像素，那么对于该元素，1em等于14像素。 ex：指的是所使用字体中小写x的高度。因此，如果有两个段落的文字大小都是24点，但每个段落使用不同的字体，那么每个段落的ex值可能是不同的。这是因为不同的字体对x的高度有所不同。 px：显示器上的像素是一小块颜色方块。一般来说，如果你声明类似于font-size: 18px的样式，网页浏览器几乎肯定会在你的显示器上使用实际的像素，因为它们已经存在。但对于其他显示设备，比如打印机，用户代理程序将需要将像素长度重新缩放为更合理的单位。换句话说，打印代码必须计算出一个像素中有多少个点，为此，它可能使用96ppi的参考像素。 结论 由于可能需要重新缩放，像素被定义为相对单位，尽管在网页设计中，它们的行为与绝对单位类似。 参考资料：《CSS权威指南》（Eric Meyer著）
- Mohammadreza
11
px、em 和 ex 有什么区别？
http://www.w3.org/TR/CSS21/syndata.html#length-units 对 CSS 中可用的这些和其他长度单位进行了描述。
当在 CSS 中定义字体大小时，我应该使用 px、pt 还是 em？
通常情况下，在屏幕上使用百分比，在打印时使用 pt。
- Quentin
2
1我认为，在对文本强烈依赖的对齐情况下，使用em或ex比百分比更好，因为这些值对应于字体大小。 - dbmikus
1@dbmikus —
ex有点奇怪，大多数人不想用这些术语来表达字体大小。1em恰好是100％，因此相关性完全相同。一些旧的浏览器（请注意回答时的时间）在处理em单位的字体大小时存在错误，因此百分比明显更优。现在这并不那么重要了。 - Quentin网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接