我应该使用pt还是px？

Question

CSS pt和pxCSS有什么区别？我应该使用哪一个？为什么？

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.

引用那篇文章:

px单元是CSS的神奇单元.它与当前字体无关,也与绝对单位无关.px单元被定义为小但可见,并且可以显示具有锐边的水平1px宽线(无抗锯齿).什么是锋利的,小的和可见的取决于设备和它的使用方式:你把它靠近你的眼睛,如手机,手臂长度,如电脑显示器,或介于两者之间,如书？因此,px不被定义为恒定长度,而是取决于设备的类型及其典型用途.

为了了解px的外观,想象一下从20世纪90年代开始的CRT计算机显示器:它可以显示的最小点数约为1/100英寸(0.25毫米)或更多.px单元的名称来自那些屏幕像素.

如今,有些设备原则上可以显示较小的尖点(尽管您可能需要放大镜才能看到它们).但是,无论设备是什么,上个世纪在CSS中使用px的文档看起来都是一样的.特别是打印机可以显示比1px小得多的细节线条,但即使在打印机上,1px线条看起来与计算机显示器上看起来非常相似.设备更改,但px始终具有相同的视觉外观.

该文提供了有关使用ptvs pxvs 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 - 关键字

取自文章:

PT

可以声明字体大小的最终测量单位是点值(pt).点值仅适用于打印CSS!点是用于真实纸上印刷的测量单位.72pts =一英寸.一英寸=一个真实的英寸像一个统治者.屏幕上没有一英寸,根据分辨率完全是任意的.

就像在字体大小调整的监视器上像素的准确度一样,点大小在纸上是准确的.要在打印页面时获得最佳的跨浏览器和跨平台结果,请设置打印样式表并使用磅值调整所有字体的大小.

为了更好地衡量,我们不使用点大小进行屏幕显示(除了它是荒谬的)的原因是跨浏览器结果有很大不同:

PX

如果你需要细粒度的控制,像素值(px)中的字体大小是一个很好的选择(这是我的最爱).在计算机屏幕上,它不会比单个像素更精确.通过以像素为单位调整字体大小,您实际上是在告诉浏览器将字母精确地渲染为高度的像素数:

Windows,Mac,别名,消除锯齿,跨浏览器无关紧要,设置为14px的字体高度为14px.但这并不是说不会有一些变化.在下面的快速测试中,结果比关键字略微更一致,但不完全相同:

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

"更大"将母公司的16px提升至20px,增长25%.

对于可访问性和可用性问题,像素在过去得到了糟糕的包装.在IE 6及更低版本中,用户无法调整以像素为单位设置的字体大小.这意味着,我们的臀部健康年轻设计师可以在12px的设置类型,读它的屏幕就好了,但是,当人们在牙齿长一点走颠簸起来的大小,使他们能够阅读它,他们不能.这确实是IE 6的错,不是我们的,但我们全球有机纺织品标准是我们全球有机纺织品标准,我们必须对付它.

以像素为单位设置字体大小是最准确的(我觉得最满意的)方法,但考虑到您的网站和他们的访问需求仍在使用IE 6的游客数量.我们正处于不再需要关心的前沿.

Answer 4

对于在不能正确计算DPI的设备上呈现的任何内容,pt是1/72英寸并且是无用的度量.这使其成为打印的合理选择,也是在屏幕上使用的可怕选择.

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

CSS提供了许多其他单元,您应该选择哪一个取决于您设置的大小.

如果您需要调整尺寸以匹配图像,或者您需要薄边框,则像素非常棒.

对于字体大小,百分比非常好,因为如果一致地使用它们,则会得到与用户偏好成比例的字体大小.

当你想要一个元素根据字体大小调整自身时,Ems很棒(如果字体大小较大,则段落可能会变宽)

… 等等.

Answer 5

是的，“px”的意思是“像素”

话一出口，我已经听到一大群千里眼的人正在靠近，他们的横幅上写着“px与像素无关”。他们为了解得更多而感到自豪，他们会查找每一条包含原始事实的评论，并详细解释它是错误的、不正确的、误导性的等等。

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

平静的日子

在 Retina 显示之前，一个像素就是一个像素。因为根据人类的逻辑，事情就应该如此。你在屏幕上放置一条像素线，将其放大，然后就可以了：它正好是一个像素宽。在许多硬件上，包括现代硬件，情况仍然如此，因此说 1px = 1 像素绝对是“不正确”的。

但。

当时，有一天，iPhone 4 紧随 iPhone 3 之后，将 X 和 Y 分辨率都提高了一倍，Safari 的开发人员担心所有网页都会看起来很荒谬，尤其是因为许多 Web 开发人员依赖于稳定的 320x480 分辨率。因此，仅创建 640x960 像素区域就会杀死大多数站点。这时，有人想到了一个价值数十亿美元的想法，引入了一个神奇的动物：一个称为 CSS 功能-webkit-min-device-pixel-ratio- 在 iPhone 3 上它是 1，在 iPhone 4 上它默认设置为 2。意思是“1 个 CSS 像素现在意味着 2 个屏幕像素”。这是一个非常丑陋的黑客行为，目的是保持网站看起来完好无损——它在当时是有效的，只需要付出很小的代价，一些图像看起来有点模糊，但从长远来看，它导致了全世界对实际上px没有做错任何事的可怜老人的误解。

那么：pt 还是 px？

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

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

pt呢？关于 pt 的有趣之处在于它实际上被转换为 px，因此这是指定像素大小的更糟糕的方法。这是一个计算器。当您打印某些东西时，点（因为它们来自印刷世界）开始有意义，但今天有更好的替代品，具体取决于您的需要 - 所以说实话，点几乎从不需要。

长话短说

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

Answer 6

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

\n

编辑：澄清说明\n一英寸或 2.54 厘米大约有 72 (72.272) 个点。该点首先由米兰印刷师 Francesco Torniella da Novara（约 1490 \xe2\x80\x93 1589）在他的 1517 年字母表 L'Alfabeto 中确立。（您可以搜索相关的各种参考资料）

\n\n

px是“像素”的缩写，它是屏幕或点阵打印机或其他以点方式呈现的打印机或设备上的简单“点” - 与具有固定尺寸、实心撞针的旧打字机相反通过按压丝带来留下字符的印记，从而留下固定尺寸的图像。

\n

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

\n

不同的印刷字体和大小有不同的框（大小写），但仍然有“大写”和“小写”。

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n