我应该使用pt还是px？

Question

pt 和 px 在 CSS 中的区别是什么？我应该使用哪一个？为什么？

Answer 1

px≠像素

所有这些答案似乎都不正确。与直觉相反，在 CSS 中 px 不是像素。至少，不是简单的物理意义上的。

阅读这篇来自W3C、EM, PX, PT, CM, IN… 的文章，了解px 如何成为为CSS 发明的“神奇”单元。 px 的含义因硬件和分辨率而异。 （那篇文章很新鲜，最后更新时间是 2014-10。）

我自己的想法：1 px is the size of a thin line intended by a designer to be barely visible.

引用that article:

px 单位是 CSS 的神奇单位。它与当前字体无关，也与绝对单位无关。 px 单位被定义为小但可见，这样可以显示水平 1px 宽的线，边缘锐利（无抗锯齿）。什么是锐利、小巧和可见取决于设备及其使用方式：您是把它放在靠近眼睛的地方，比如手机，还是手臂距离，比如电脑显示器，还是介于两者之间，比如一本书？因此，px 没有定义为恒定长度，而是取决于设备类型及其典型用途。

要了解 px 的外观，请想象一下 1990 年代的 CRT 计算机显示器：它可以显示的最小点大约为 1/100 英寸（0.25 毫米）或更多。 px 单位的名字来源于这些屏幕像素。

如今，原则上有些设备可以显示较小的尖点（尽管您可能需要放大镜才能看到它们）。但是上个世纪在 CSS 中使用 px 的文档看起来还是一样的，不管是什么设备。尤其是打印机，可以显示比 1px 细得多的清晰线条，但即使在打印机上，1px 线条看起来也与在计算机显示器上看起来非常相似。设备会发生变化，但 px 始终具有相同的视觉外观。

那篇文章给出了一些关于使用pt vs px vs em 来回答这个问题的指导。

Answer 2

这里你有一个非常详细的解释他们的区别

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

它的要点（来自源）

像素 是用于屏幕媒体（即在计算机屏幕上读取）的固定尺寸单位。像素代表“图片元素”，如您所知，一个像素是屏幕上的一个小“正方形”。 点传统上用于印刷媒体（任何要印刷在纸上的东西等）。一点等于 1/72 英寸。点很像像素，因为它们是固定大小的单位，不能按大小缩放。

Answer 3

在 CSS-Tricks 上查看这篇出色的文章：

• px – em – % – pt – keyword

摘自文章：

---

pt

可以声明字体大小的最终测量单位是磅值 (pt)。 点值仅适用于印刷 CSS！ 点是用于现实生活中的纸上墨水排版的度量单位。 72 点 = 一英寸。一英寸 = 现实生活中的一英寸，就像尺子一样。屏幕上没有一英寸，这完全取决于分辨率。

就像像素在显示器上的字体大小是非常精确的一样，磅值在纸上也是非常精确的。为了在打印页面时获得最佳的跨浏览器和跨平台结果，请设置打印样式表并使用磅值调整所有字体的大小。

为了更好地衡量，我们不使用点大小进行屏幕显示（除了荒谬之外）的原因是跨浏览器的结果截然不同：

像素

如果您需要细粒度的控制，以像素值 (px) 调整字体大小是一个很好的选择（这是我的最爱）。在计算机屏幕上，它不会比单个像素更准确。通过以像素为单位调整字体大小，您实际上是在告诉浏览器以精确的像素高度呈现字母：

Windows、Mac、别名、抗锯齿、跨浏览器，没关系，设置为 14px 的字体将是 14px 高。但这并不是说不会有一些变化。在下面的快速测试中，结果比关键字稍微一致但不完全相同：

由于像素值的性质，它们不会级联。如果父元素的像素大小为 18px，子元素为 16px，则子元素为 16px。但是，字体大小设置可以组合使用。例如，如果父级设置为 16px，而子级设置为更大，则子级确实会比父级大。快速测试向我展示了这一点：

“更大”将父级的 16px 提高到 20px，增加了 25%。

过去，由于可访问性和可用性问题，像素的包装很糟糕。在 IE 6 及更低版本中，以像素为单位设置的字体大小用户无法调整大小。这意味着我们这些年轻健康的设计师可以将字体设置为 12 像素并在屏幕上很好地阅读，但是当牙齿稍长一点的人去增加尺寸以便他们可以阅读时，他们就做不到了。这确实是 IE 6 的错，不是我们的错，但我们得到了我们得到的，我们必须处理它。

以像素为单位设置字体大小是最准确的（我认为也是最令人满意的）方法，但请考虑您网站上仍在使用 IE 6 的访问者数量及其可访问性需求。我们正处于不再需要关心这个问题的最前沿。

---

Answer 4

pt 是 1/72 英寸，对于在无法正确计算 DPI 的设备上呈现的任何内容，它都是无用的度量。这使它成为打印的合理选择，而在屏幕上使用则是可怕的选择。

px 是一个像素，在大多数情况下会映射到屏幕像素。

CSS 提供了一堆其他的单位，你应该选择哪一个取决于你设置的大小。

如果您需要调整大小以匹配图像，或者如果您想要细边框，则像素非常好。

百分比非常适合字体大小，因为如果您始终如一地使用它们，您会获得与用户偏好成正比的字体大小。

当您希望元素根据字体大小调整自身大小时，Ems 非常棒（因此如果字体大小较大，段落可能会变宽）

……等等。

Answer 5

pt 是“point”的派生词（缩写），在历史上用于打印字体，其大小通常以“points”“测量”，其中 1 点的近似测量值为 1/72 英寸，并且因此 72 磅的字体大小为 1 英寸。

编辑：注意澄清 一英寸或 2.54 厘米大约有 72 (72.272) 个点。这一点最初是由米兰印刷师 Francesco Torniella da Novara（约 1490 – 1589 年）在他 1517 年的字母 L'Alfabeto 中确立的。 （你可以搜索各种参考）

---

px 是“像素”的缩写，它是屏幕或点阵打印机或其他以点方式呈现的打印机或设备上的简单“点” - 与具有固定大小，实心的前锋，通过在色带上按压留下字符的印记，从而留下固定大小的图像。

与点密切相关的是术语“大写”和“小写”，这在历史上与固定印刷字符的选择有关，其中“大写”字符放置在非大写字符上方的框（大小写）中它们被放置在下面的框中，因此是“小写”。

对于不同的印刷字体和大小有不同的盒子（大小写），但仍然是“大写”和“小写”。

另一个术语是“pica”，它是字体中一个字符的度量，因此 pica 是 1/6 英寸或 12 磅的度量单位 (12/72)。

严格来说，计算机上的测量值是 4.233 毫米或 0.166 英寸，而旧点（美国）是 1/72.27 英寸，法国是 4.512 毫米（0.177 英寸）。因此，我对测量的“近似”声明。

此外，办公室中使用的打字机具有“Elite”或“Pica”尺寸，其尺寸分别为每英寸 10 和 12 个字符。

此外，在标准化之前，“点”是基于金属印刷商“脚”的大小，即一个字符的基本脚印大小，并且大小有所不同。

请注意，印刷的“脚”最初来自已故印刷商的实际脚。一个印刷脚包含 72 派卡或 864 点。

对于 CSS 的使用，我更喜欢使用 EM 而不是 px 或 pt，从而获得了在不损失相对位置和大小的情况下进行缩放的优势。

编辑：为了完整起见，您可以将 EM (em) 视为一种字体高度的度量元素，因此 12pt 字体的 1em 将是该字体的高度，而 2em 将是该高度的两倍。请注意，对于 12px 字体，2em 是 24 像素。 SO 10px 通常是标准字体的 0.63em，因为“大多数”浏览器基于 16px = 1em 作为标准字体大小。

Answer 6

是的，“px”表示“像素”

说到这里，我已经可以听到一大群千里眼正在逼近，他们的横幅上写着“px与像素无关”。他们很自豪能够更好地了解，因此他们会查找包含原始真相的每条评论，并详细解释它是错误的、不正确的、误导性的等等。

是的，他们有一个重点——实际上是一个非常具体的时间点，称为 iPhone 4。
这就是发生的事情。

平静的日子

在 Retina 显示之前，一个像素就是一个像素。因为按照人类的逻辑，这就是它应该的样子。你在屏幕上放了一条像素线，你把它放大了，然后就可以了：它正好是一个像素宽。在包括现代硬件在内的许多硬件上，情况仍然如此，所以说 1px = 1 像素是“不正确的”。

但是。

当时，有一天，iPhone 3 被 iPhone 4 追随，X 和 Y 分辨率都翻了一番，Safari 的开发者担心所有网页都会看起来很可笑，尤其是因为许多 Web 开发者依赖于稳定的 320x480 分辨率.所以仅仅创建一个 640x960 像素的区域就会杀死大多数网站。而此时，有人想出了十亿美元的想法来引入一个神奇的野兽：一个名为 -webkit-min-device-pixel-ratio 的 CSS 功能——在 iPhone 3 上它是 1，而在 iPhone 4 上它默认设置为 2。意思是“1 CSS 像素现在意味着 2 个屏幕像素”。一个非常丑陋的 hack 来保持网站看起来有些完整 - 它当时有效，一些图像看起来有点模糊的成本非常低，但从长远来看，它导致了世界范围内对可怜的老 px 的误解，他们实际上什么也没做错了。

那么：pt 还是 px？

在屏幕上，使用 px，因为在多对多显示器上，它意味着一个像素。使用像素的最大优点是它们看起来很脆；即使 1px 意味着 2 或 3 个物理图片元素，您绘制的任何内容都将从边界开始，而不是介于两者之间。这个非常重要。观看任何包含文本的浏览器动画，尤其是大小转换：当您将 div 增加到两倍大小时，但速度较慢。您将看到您的浏览器如何在动画完成后重新计算其像素并重新绘制字体。该区域的临时图像有点模糊 - 使动画本身更平滑 - 然后，在达到其最终状态后，计算出更精确的图像。见this CodePen。

1px 始终是硬件像素的整数乘法；也就是说，除非您的操作系统很智能，例如将整个桌面的大小调整为 sqrt(2) x PI。或者只是 125%，是的，你好，微型笔记本电脑上的 Windows。但无论如何 - 使用 px，您最有可能将您的东西与物理网格对齐。

pt 呢？ pt 的有趣之处在于它实际上被转换为 px，因此它只是指定像素大小的一种更糟糕的方式。这是calculator。当您打印某些东西时，积分（因为它们来自印刷世界）开始变得有意义，但今天有更好的选择，具体取决于您的需要 - 所以，几乎从来不需要积分。

TL;DR

对于屏幕，尽可能使用 px。