pt
和px
在CSS中有什么区别?我应该使用哪一个,为什么?
pt
和px
在CSS中有什么区别?我应该使用哪一个,为什么?
px
≠ 像素所有这些答案似乎都是不正确的。与直觉相反,在 CSS 中,px
不是像素。至少在简单的物理意义上不是。
阅读来自 W3C 的文章EM,PX,PT,CM,IN…,了解 px
是为 CSS 发明的“神奇”单位。 px
的含义因硬件和分辨率而异。(该文章很新,最后更新于2014-10。)
我自己的思考方式:1 px 是设计师打算几乎看不见的细线的大小。
引用that article的话:
px单位是CSS的魔法单位。它与当前字体无关,也与绝对单位无关。px单位定义为小但可见,并且可以显示具有锐利边缘(没有反走样)的水平1px宽线条。什么是锐利、小而可见的取决于设备及其使用方式:您是否像手机一样靠近眼睛,像计算机显示器一样远离,还是介于两者之间,如书籍?因此,px不被定义为一个恒定的长度,而是取决于设备类型及其典型用途。pt
、px
和em
的指导,以回答这个问题。看一下CSS-Tricks上这篇很好的文章:
选自该文章:
声明字体大小的最后一种单位是点值(pt)。点值仅适用于打印CSS!点是用于实际印刷排版的度量单位。72点 = 1英寸。1英寸 = 尺子上的实际英寸,而不是屏幕上的英寸,后者完全是基于分辨率的任意值。
就像像素在监视器上对于字体大小是死准的一样,点大小在纸张上也是死准的。为了在打印页面时获得最佳的跨浏览器和跨平台结果,请设置打印样式表并使用点大小调整所有字体。
出于良好的习惯,我们不使用点大小进行屏幕显示(除了它很荒谬之外),原因是跨浏览器的结果极其不同:
如果你需要细化控制,以像素值(px)为单位调整字体大小是一个很好的选择(这是我最喜欢的)。在计算机屏幕上,单个像素的精度无法再提高了。使用像素大小调整字体时,你实际上告诉浏览器将字母呈现为该高度的像素数:
Windows,Mac,抗锯齿,跨浏览器等等,都没有关系,设置为14px的字体将是14px高的。但这并不是说不会仍然有一些差异。在下面的快速测试中,结果比关键字稍微一致,但并非完全相同:
由于像素值的性质,它们不会级联。如果父元素具有18像素大小,而子元素是16像素,则子元素将为16像素。然而,可以结合使用字体大小设置。例如,如果将父元素设置为16像素,将子元素设置为较大,则子元素确实比父元素大。快速测试显示了这一点:
“Larger”将父元素的16像素提高到20像素,增加了25%。
过去,像素因可访问性和可用性问题而受到批评。在IE 6及以下版本中,以像素设置的字号无法由用户调整大小。这意味着我们这些时尚年轻的设计师可以将字体设置为12像素并在屏幕上轻松阅读,但当那些稍长一点的人想要增加字体大小以便阅读时,他们将无能为力。这实际上是IE 6的问题,而不是我们的问题,但我们必须应对它。
在像素中设置字体大小是最精确的(我也发现最令人满意的)方法,但请考虑您网站上仍在使用IE 6的访问者数量及其可访问性需求。我们正处于不再需要关注这一点的边缘。
px
并不是指像素,至少不是简单的物理意义上的像素。请参考 W3C 的这篇文章,它解释了 px
是一种由 CSS 独立发明出来的“神奇”单位。px
的含义会因硬件和屏幕分辨率而异。 - Basil Bourque这里有一个非常详细的解释它们之间的区别
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
简而言之(来自原文)
像素(Pixels)是固定大小的单位,用于屏幕媒体(即在电脑屏幕上阅读)。像素代表"图片元素",一个像素就是你屏幕上的一个小"正方形"。 点数(Points)传统上用于印刷媒体(任何要打印在纸张等媒介上的东西)。一个点等于1/72英寸。点数和像素非常相似,因为它们是固定大小的单位,不能按比例缩放。
px
并不是像素,至少不是简单的物理意义上的像素。可以阅读WC3的这篇文章,解释px
是CSS专门发明的“神奇”单位。px
的含义因硬件和屏幕分辨率而异。 - Basil Bourquept是一英寸的1/72,在设备上渲染时,如果DPI计算不正确,这个度量标准就毫无用处。对于打印而言是合理的选择,但在屏幕上使用时则不适合。
px是像素,大多数情况下会映射到屏幕像素上。
CSS提供了许多其他单位,你应该根据所设置的大小来选择。
如果您需要将某些内容的大小与图像匹配,或者想要一个细边框,则像素是很好的选择。
如果您希望字体大小与用户喜好成比例地调整,那么百分比是字体大小的很好选择。
当您想让元素根据字体大小自动调整大小(例如,如果字体大小更大,则段落可能会变宽)时,em非常有用。
...等等。
我一说出这句话,就能听到一群自命不凡的先知前来,手持着“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。
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 作为标准字体大小。
rem
,有时使用 em
- em
派生自父容器,而 rem
派生自根容器(可能是浏览器;或者由库设置,例如我相信像 Bootstrap 这样的库通过使用 :root{}
css 来规范化为 16px = 1em = 1rem。 - Mark Schultheisspx
来适应屏幕,或者使用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
)。
pt points 1pt = 1/72nd of 1in
px pixels 1px = 1/96th of 1in
px
,但由于不同的观看距离,它在不同平台上会有所变化。px
单位的设计考虑了眼睛与屏幕的距离,这是由供应商来解释的,因此导致了平台之间的差异。px
旨在在屏幕媒体上显示得很好,因为它考虑了屏幕分辨率和典型观看距离,而pt
适用于印刷媒体的固定尺寸,因为它始终相对于绝对物理单位(毫米、英寸等)保持不变。