CSS px、em 和 ex 有什么区别？

What is the difference between px, em and ex?

提问by manraj82

What is the difference between px, emand ex? And when you define font-size in CSS, do you use px, ptor em?

之间有什么区别px，em和ex？当你在 CSS 中定义 font-size 时，你使用px,pt还是em?

采纳答案by Joshua Partogi

1. Pixels (px) are browser dependent. It is the absolute size that you would see on your screen.
2. Emare sort of like percentages. Ems is referring to the base text size. The value of 1 emmeans the same thing as a value of 100 percent. But you can also say it in the opposite way: A percentage value is just an emmultiplied by 100.
3. Points(pt) are what you would want to use in print media.

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

回答by Shivkant

em: the font-sizeof the relevant font
ex: the x-heightof the relevant font
px: pixels, relative to the viewing device

em:font-size相关字体的
ex:x-height相关字体的
px: 像素，相对于查看设备

回答by Quentin

what is the difference px,em and ex?

px,em 和 ex 有什么区别？

http://www.w3.org/TR/CSS21/syndata.html#length-unitsdescribes those and the other length units available in CSS

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

Amd when you define font-size in css, do i use px,pt or em?

在 css 中定义字体大小时，我是使用 px、pt 还是 em？

As a rule of thumb, use percentages on screen and pt for print.

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

回答by Mohammadreza

CSS Length Units:

CSS 长度单位：

• Absolute: Inches(in), centimeter(cm), milimeter (mm), points (pt), picas (pc)

• 绝对值：英寸（in）、厘米（cm）、毫米（mm）、点（pt）、派卡（pc）

Pointsare standard typographical measurements that have been used by printers and typesetters for decades and by word-processing programs for many years. Traditionally, there are 72 points to an inch (points were defined before widespread use of the metric system). Therefore, the capital letters of text set to 12 points should be one-sixth of an inch tall. For example, p {font-size: 18pt;} is equivalent to p {font-size: 0.25in;}.

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

Picasare another typographical term. A pica is equivalent to 12 points, which means there are 6 picas to an inch. As just shown, the capital letters of text set to 1 pica should be one-sixth of an inch tall. For example, p {font-size: 1.5pc;} would set text to the same size as the example declarations found in the definition of points.

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

These units are really useful only if the browser knows all the details of the monitor on which your page is displayed, the printer you're using, or whatever other user agent might apply. On a web browser, display is affected by the size of the monitor and the resolution to which the monitor is setand there isn't much that you, as the author, can do about these factors. absolute units are much more useful in defining style sheets for printed documents, where measuring things in terms of inches, points, and picas is common. As you've seen, attempting to use absolute measurements in web design is perilous at best.

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

• Relative: em(em-height), ex(e-height), px. The first two stand for and "x-height," which are common typographical measurements; however, in CSS, they have meanings you might not expect if you are familiar with typography.

• 相对: em(em-height), ex(e-height), px。前两个代表和“x-height”，这是常见的印刷尺寸；然而，在 CSS 中，如果您熟悉排版，它们的含义您可能不会想到。

em: one "em" is defined to be the value of font-sizefor a given font. If the font-size of an element is 14 pixels, then for that element, 1em is equal to 14 pixels.

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

ex: refers to the height of a lowercase xin the font being used. Therefore, if you have two paragraphs in which the text is 24 points in size, but each paragraph uses a different font, then the value of ex could be different for each paragraph. This is because different fonts have different heights for x

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

px: tiny boxes of color in a monitor are pixels. In general, if you declare something like font-size: 18px, a web browser will almost certainly use actual pixels on your monitor after all, they're already there but with other display devices, like printers, the user agent will have to rescale pixel lengths to something more sensible. In other words, the printing code has to figure out how many dots there are in a pixel, and to do so, it may use the 96ppi reference pixel.

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

Conclution

结论

Because of this potential for rescaling, pixels are defined as a relative unit of measurement, even though, in web design, they behave much like absolute units.

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

Rrefrence: css the definite guid by eric meyer

Rrefrence: css the 确定 guid by eric meyer

回答by Toi Nguyen

em: The emis a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1emis equal to 12pt.

em：这em是一个可扩展的单元，用于网络文档媒体。一个 em 等于当前字体大小，例如，如果文档的字体大小是12pt，1em则等于12pt。

px: Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen's resolution).

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

pt: Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

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