logo标签列表

我应该使用pt还是px？

css
194

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

3
简而言之，请使用“rem”。pt 用于打印，px 用于显示器，但它不会随浏览器设置而改变，因此请使用 em/rem。以下是 pt 和 px 的历史大回顾，但没有太多建议。 - user
7个回答
108

px ≠ 像素

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

阅读来自 W3C 的文章EM，PX，PT，CM，IN…，了解 px 是为 CSS 发明的“神奇”单位。 px 的含义因硬件和分辨率而异。（该文章很新，最后更新于2014-10。）

我自己的思考方式：1 px 是设计师打算几乎看不见的细线的大小。

引用that article的话：

px单位是CSS的魔法单位。它与当前字体无关，也与绝对单位无关。px单位定义为小但可见，并且可以显示具有锐利边缘（没有反走样）的水平1px宽线条。什么是锐利、小而可见的取决于设备及其使用方式：您是否像手机一样靠近眼睛，像计算机显示器一样远离，还是介于两者之间，如书籍？因此，px不被定义为一个恒定的长度，而是取决于设备类型及其典型用途。
要了解px的外观，请想象一下上世纪90年代的CRT计算机显示器：它可以显示的最小点约为1/100英寸（0.25毫米）或更多。px单位得名于这些屏幕像素。
现在有可能显示更小的锐利点（尽管您可能需要放大镜才能看到它们）。但是，使用CSS中的px的上个世纪文件在任何设备上看起来都是一样的。特别是打印机可以显示比1px更小的更细节的锐利线条，但即使在打印机上，1px的线条看起来也与在计算机显示器上看起来的非常相似。设备变化，但px始终具有相同的视觉外观。
那篇文章提供了一些关于使用pt、px和em的指导，以回答这个问题。
3
在CSS中，我能像在iOS上使用“pt”和在Android上使用“dp”一样使用“px”吗？ - GRiMe2D
6
这是唯一正确的答案。引用的w3.org网址已从http更新为https：https://www.w3.org/Style/Examples/007/units.en.html - hyyou2010
33
“thin line intended by a designer to be barely visible.” 的意思是“设计师想让人们几乎看不见的细线。”这是误导言论。在 CSS 中，像素（pixel）等于实际像素（real pixel）乘以设备像素比（device pixel ratio），这不会更少也不会更多。 事实上，在当前问题和 CSS 工作方面并不重要。 - extempl
1
“(...) 并且可以显示具有锐利边缘的水平1像素宽线条（无抗锯齿）:” 错误。在本机Android浏览器（而非Chrome）中打开一个1像素实线，该线将在高分辨率设备上根据其屏幕位置而变得模糊不清。” - andreszs
1
这个答案是什么鬼啊，完全就是 extempl 说的。1px 曾经代表一个屏幕像素，直到高 DPI 显示器出现。现在它在技术上被设备缩放，但浏览器仍将 1px 视为其屏幕空间中的 1 像素。400 个 1px 宽度的元素将填满一个 400 像素宽的浏览器窗口，即使它实际上渲染为 800 像素。其他一切都是毫无意义的语义游戏。 - René Roth
63

看一下CSS-Tricks上这篇很好的文章：

选自该文章：

pt

声明字体大小的最后一种单位是点值（pt）。点值仅适用于打印CSS！点是用于实际印刷排版的度量单位。72点 = 1英寸。1英寸 = 尺子上的实际英寸，而不是屏幕上的英寸，后者完全是基于分辨率的任意值。

就像像素在监视器上对于字体大小是死准的一样，点大小在纸张上也是死准的。为了在打印页面时获得最佳的跨浏览器和跨平台结果，请设置打印样式表并使用点大小调整所有字体。

出于良好的习惯，我们不使用点大小进行屏幕显示（除了它很荒谬之外），原因是跨浏览器的结果极其不同：

px

如果你需要细化控制，以像素值（px）为单位调整字体大小是一个很好的选择（这是我最喜欢的）。在计算机屏幕上，单个像素的精度无法再提高了。使用像素大小调整字体时，你实际上告诉浏览器将字母呈现为该高度的像素数：

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

由于像素值的性质，它们不会级联。如果父元素具有18像素大小，而子元素是16像素，则子元素将为16像素。然而，可以结合使用字体大小设置。例如，如果将父元素设置为16像素，将子元素设置为较大，则子元素确实比父元素大。快速测试显示了这一点:

“Larger”将父元素的16像素提高到20像素，增加了25％。

过去，像素因可访问性和可用性问题而受到批评。在IE 6及以下版本中，以像素设置的字号无法由用户调整大小。这意味着我们这些时尚年轻的设计师可以将字体设置为12像素并在屏幕上轻松阅读，但当那些稍长一点的人想要增加字体大小以便阅读时，他们将无能为力。这实际上是IE 6的问题，而不是我们的问题，但我们必须应对它。

在像素中设置字体大小是最精确的（我也发现最令人满意的）方法，但请考虑您网站上仍在使用IE 6的访问者数量及其可访问性需求。我们正处于不再需要关注这一点的边缘。

3
对于上面的问题，这就是答案。 - overexchange
14
在 CSS 中，px并不是指像素，至少不是简单的物理意义上的像素。请参考 W3C 的这篇文章，它解释了 px 是一种由 CSS 独立发明出来的“神奇”单位。px的含义会因硬件和屏幕分辨率而异。 - Basil Bourque
一英寸或2.54厘米大约有72（72.272）个点。点最初由米兰印刷家弗朗切斯科·托尼埃拉·达诺瓦拉（约1490年-1589年）在他的1517年字母表《L'Alfabeto》中建立。（您可以搜索各种参考资料） - Mark Schultheiss
1
@MarkSchultheiss，世界已经进步了。 de Novara的观点与任何英寸都没有关系。它是1/9我忘记了什么，大约是现代点的一半。接下来是Didot点，正好是1/72英寸......法国皇家英寸，即仍在帝国以外使用。还有两个与任何英寸无关的“公制”点：国际点0.4毫米和日本点0.25毫米。最糟糕的是，TeX（因此LaTeX）每个现代公制英寸使用72.27个点（定义为25.4毫米），其他DTP使用72.00（谢谢，Don）。这是一团糟。 - kkm
@BasilBourque，这个答案在它被写出来的时候大部分都是正确的。 - kkm
显示剩余2条评论
62

这里有一个非常详细的解释它们之间的区别

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

简而言之（来自原文）

像素（Pixels）是固定大小的单位，用于屏幕媒体（即在电脑屏幕上阅读）。像素代表"图片元素"，一个像素就是你屏幕上的一个小"正方形"。 点数（Points）传统上用于印刷媒体（任何要打印在纸张等媒介上的东西）。一个点等于1/72英寸。点数和像素非常相似，因为它们是固定大小的单位，不能按比例缩放。
16
我喜欢那个网站，但它并没有真正解释%是什么。100%的什么？我的车？ - Joe Phillips
7
如果您没有在任何地方设置过字体大小，那么"@Joe Phillips - 100% will be the font-size you set on the last parent element."中的100％将是最后一个父元素上设置的字体大小。默认情况下，大多数浏览器的默认浏览器字体大小为16px（可以通过浏览器选项进行更改）。 - easwee
3
一个像素（px）等于1/96英寸。在大多数桌面显示器上，它将对应于一个设备像素。但是在其他设备上，所有单位可能会被缩放以使px不等于设备像素。然而，其他绝对单位仍将等比例缩放，因此一个“英寸”仍将等于96个“px”。 - thomasrutter
69
这篇在kyleschaeffer上的文章是错误的。在CSS中，px并不是像素，至少不是简单的物理意义上的像素。可以阅读WC3的这篇文章，解释px是CSS专门发明的“神奇”单位。px的含义因硬件和屏幕分辨率而异。 - Basil Bourque
6
将此回答的投票下降到它所属的史前洞穴。请编辑它。 - Toskan
显示剩余4条评论
19

pt是一英寸的1/72，在设备上渲染时，如果DPI计算不正确，这个度量标准就毫无用处。对于打印而言是合理的选择，但在屏幕上使用时则不适合。

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

CSS提供了许多其他单位，你应该根据所设置的大小来选择。

如果您需要将某些内容的大小与图像匹配，或者想要一个细边框，则像素是很好的选择。

如果您希望字体大小与用户喜好成比例地调整，那么百分比是字体大小的很好选择。

当您想让元素根据字体大小自动调整大小（例如，如果字体大小更大，则段落可能会变宽）时，em非常有用。

...等等。

9

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

我一说出这句话，就能听到一群自命不凡的先知前来，手持着“px与像素无关”的横幅。他们为了证明自己比别人更懂，会查找每一个包含原始真相的评论，并详细解释它是错误的、不正确的、误导性的等等。

事实上，他们有一点道理——确切地说，是在特定的时间点，即iPhone 4发布之前。

平稳时期

在Retina显示屏出现之前，一个像素就是一个像素。因为按照人类的逻辑，应该是这样的。你在屏幕上画一条单像素线，然后把它放大，很显然它的宽度就是恰好一像素。在许多硬件设备上，包括现代设备在内，情况仍然如此，所以说1px=1像素并没有什么错误可言。

但是......

当时，有一天，iPhone 3被iPhone 4取代，分辨率在X和Y两个方向上都翻了一倍，Safari的开发者们担心所有的网页看起来都会很丑陋，特别是因为许多网页开发者依赖于稳定的320x480分辨率。所以，只是创建一个640x960像素的区域就足以破坏大部分网站了。于是，有人提出了一个价值十亿美元的想法，引入了一个神奇的生物：一个名为-webkit-min-device-pixel-ratio的CSS特性——在iPhone 3上它设为1，在iPhone 4上则默认设置为2。这意味着“1个CSS像素现在代表2个屏幕像素”。这是一种非常丑陋的hack方法，可以使网站看起来有些完整，虽然它在那个时候确实有效，但它给可怜的老px带来了全球性的误解，而其实px并没有做错任何事情。

那么：应该使用pt还是px？

在屏幕上，使用px，因为在许多显示器上，它将代表一个物理像素。使用像素最大的优点是它们看起来很清晰；即使1px表示2或3个物理像素，你绘制的任何内容都将从边界开始，而不是中间某个位置。这非常重要。观看任何包含文本的浏览器动画，特别是大小转换：当你将一个div放大到两倍大小时，但缓慢地进行时，你会看到浏览器重新计算其像素，并在动画完成后重绘字体。这个区域有一个临时图像，比较模糊——为了使动画本身更加流畅——然后，在达到最终状态后，计算出更精确的图像。参见此CodePen。

1像素始终是硬件像素的整数倍；也就是说，除非您的操作系统很聪明地将整个桌面调整为sqrt（2）x PI或125％（你好，小笔记本上的Windows），否则px可以让你最有可能与物理网格对齐。

那pt呢？关于pt的有趣之处在于它实际上被转换为px，因此这只是指定像素大小的更差的方式。这里有一个计算器。点（因为它们来自印刷世界）在打印时开始变得有意义，但今天有更好的选择，具体取决于您需要什么-所以说实话，几乎不需要使用点。

简而言之

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

我不喜欢你的解释。99%的时间你主张使用px，然后写了一个关于pt的段落，基本上是说你不需要它，并且有更好的替代方案，但你没有提到那些是什么。 - Paul-Sebastian Manole
2
这是一个关于CSS中pt和px的区别的问题。我建议在屏幕上使用px。其他替代方案不在本次回答范围内。 - dkellner
5

pt是“point”的缩写，它在印刷字体中历史上常用于测量字体大小，“point”通常被测量为1/72英寸，因此72点字体的大小为1英寸。

编辑：澄清说明

一英寸或2.54厘米大约有72（72.272）个点。该点最初由米兰排版工艺师Francesco Torniella da Novara（c. 1490-1589）在他的1517年字母表L'Alfabeto中确立。（您可以搜索各种相关引用）

px是“pixel”的缩写，它是屏幕或点阵打印机或其他以点方式呈现的打印机或设备上的简单“点”，与旧式打字机不同，后者具有固定大小的实心敲击器，通过按下色带留下字符的印记，从而留下固定大小的图像。

与“point”密切相关的术语是“大写”和“小写”，这些术语历史上与固定的排版字符选择有关，在其中将“大写”字符放置在盒子（大小写）上方，非大写字符放置在盒子下方，因此是“小写”。

不同的排版字体和大小有不同的盒子（大小写），但每个字体和大小都有“大写”和“小写”。

另一个术语是“派卡”，它是字体中一个字符的度量单位，因此派卡是1/6英寸或12点度量单位（12/72）。

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

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

此外，“point”在标准化之前是基于金属排版工艺师的“脚”尺寸，即一个字符的基本足迹大小，并且大小略有不同。

请注意，排版工艺师的“脚”最初来自已故印刷工人的实际脚。排版工艺师的脚包含72个派卡或864个点。

至于CSS的使用，我更喜欢使用EM而不是px或pt，从而获得缩放而不丢失相对位置和大小的优势。

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

1
你还在使用 em 或 rem 吗？ - Alex78191
@Alex78191 - 这取决于上下文，有时我使用 rem，有时使用 em - em 派生自父容器，而 rem 派生自根容器（可能是浏览器；或者由库设置，例如我相信像 Bootstrap 这样的库通过使用 :root{} css 来规范化为 16px = 1em = 1rem。 - Mark Schultheiss
为什么不将字体大小规范化为16px=16rem=16em？ - Alex78191
@Alex78191 - 大多数浏览器在根级别（body/html）使用16px == 1rem == 1em - 在非常广泛和粗略的意义上，可以将其视为一个“字符”是16px的“正常大小”，因此1rem或1em是开始时的“一个”大小 - 因此，1.5rem将比“正常”大1.5倍，而1.5em将比“我现在所在的位置”大1.5倍 - 因此，如果容器（例如body中的div）具有1.5rem的字体大小，并且内部div具有1.5em，则该内部div为（1rem * 1.5em）* 1.5em SO：（16px * 1.5）= 24px * 1.5 = 36px（是的，变得混乱了）；基本上，1比16更容易考虑。 - Mark Schultheiss
-1
使用px来适应屏幕，或者使用pt来适应打印媒体类型。
@media only screen { .class { font-size: 12px } }
@media only print  { .class { font-size: 12pt } }

简而言之;

px: 视觉角度单位（像素单位）

适用于屏幕媒体类型。像素单位px的宽度会根据设备的像素密度或DPI而变化，以在给定的显示屏上显示为最细的锐利线条（非反锯齿）。

W3.org CSS-Values-3: 视觉角度单位（像素单位） ↗︎

pt: 物理单位

适用于打印媒体类型。它可以映射到物理单位（25.4mm = 72pt = 1in）。

W3.org CSS-Values-3: 物理单位 ↗︎

单位等价性

从W3.org - CSS Values and Units ↗︎中获取
pt  points  1pt = 1/72nd of 1in
px  pixels  1px = 1/96th of 1in

上述公式是规格所期望的px，但由于不同的观看距离，它在不同平台上会有所变化。px单位的设计考虑了眼睛与屏幕的距离，这是由供应商来解释的，因此导致了平台之间的差异。
结论 px旨在在屏幕媒体上显示得很好，因为它考虑了屏幕分辨率和典型观看距离，而pt适用于印刷媒体的固定尺寸，因为它始终相对于绝对物理单位（毫米、英寸等）保持不变。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接