这里你有一个非常详细的解释他们之间的差异

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

它的jist(源代码)

像素 是屏幕媒体中使用的固定尺寸单位(即在计算机屏幕上读取)。Pixel代表“图片元素”,如你所知,一个像素就是你屏幕上的一个小“正方形”。 点 传统上用于打印介质(任何需要打印在纸上的内容等)。一点等于1/72英寸。点很像像素,因为它们是固定大小的单位,不能按大小缩放。

px γ像素

所有这些答案似乎都是错误的。与直觉相反,在CSS中, 二甲苯 不是像素 . 至少,不是简单的物理意义上的。

阅读本文 W3C , EM, PX, PT, CM, IN… 关于如何 二甲苯 是为CSS发明的“神奇”单元。意义 二甲苯 取决于硬件和分辨率。(这篇文章是最新的,最新更新于2014-10年。)

我自己的思考方式: 1 px is the size of a thin line intended by a designer to be barely visible.

引用 that article :

像素单位是CSS的神奇单位。它与当前字体无关,也与绝对单位无关。像素单元被定义为小而可见,这样一条水平的1px宽的线可以用锐边显示(没有消除混叠)。什么是锐利的,小的和可见的取决于设备和它的使用方式:你是把它靠近你的眼睛,像手机,在手臂长度,像电脑显示器,或在两者之间的某个地方,像一本书?因此,px并不是被定义为一个恒定的长度,而是一个取决于设备类型及其典型用途的东西。

为了了解PX的外观,想象一下20世纪90年代的CRT计算机显示器:它能显示的最小的点大约是1/100英寸(0.25毫米)或更多。像素单位的名称来自那些屏幕像素。

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

那篇文章对使用 pt VS 二甲苯 VS em ,回答这个问题。

看看这篇关于CSS技巧的优秀文章:

• px_“em_”“%226;_”pt_“keyword

摘自文章:

Pt

可以声明字体大小的最终度量单位是点值(pt)。 点值仅用于打印CSS! a point is a unity of measurement used for real-life ink on paper typography.72分=1英寸。一英寸=一个真实的英寸尺。不是屏幕上的一英寸,这完全是基于分辨率的任意性。

pt是1/72英寸,对于在设备上渲染的任何不正确计算dpi的东西来说,它都是无用的度量。这使得它成为一个合理的选择打印和一个可怕的选择在屏幕上使用。

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

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

如果您需要调整大小以匹配图像,或者需要薄边框,像素是很好的选择。

百分比对于字体大小是很好的,因为如果您一直使用它们,您会得到与用户偏好成比例的字体大小。

当您希望一个元素根据字体大小调整自身大小时,ems非常好(因此,如果字体大小较大,段落可能会变宽)。

等等。

pt是“point”的一个派生词(缩写),它历史上用于打印类型的面,在“points”中通常“测量”尺寸,其中1个点的近似测量值为1/72英寸,因此72点字体的大小为1英寸。

px是“pixel”的缩写,它是屏幕或点阵打印机或其他以点方式呈现的打印机或设备上的一个简单的“点”,而不是旧的打字机,旧的打字机有一个固定的大小,坚固的撞针,通过压在色带上留下字符的印记,从而留下一个固定大小的图像。

与点密切相关的是术语“大写”和“小写”,这在历史上与固定排版字符的选择有关,“大写”字符放在下面一个框中非大写字符上方的一个框(大小写)中,因此“小写”字符也放在下面一个框中。

对于不同的排版字体和尺寸,有不同的框(箱),但对于每一种字体,仍然有“上”和“下”的框。

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

严格地说,测量是在4.233毫米或0.166英寸的计算机上进行的,而旧点(美国)是1/72.27英寸,法语是4.512毫米(0.177英寸)。因此,我关于测量“近似”的陈述。

此外,办公室里使用的打字机,要么是“精英”字体,要么是“pica”字体,每英寸代表10到12个字符。

此外,“点”,在标准化之前,是基于金属印刷机“脚”的大小,一个字符的基本足迹的大小,并在大小上有所不同。

请注意,一个排版的“脚”最初来自一个已故的打印机的实际脚。一个印刷脚包含72个十二点活字或864点。

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

编辑:为了完整性,你可以把em(em)看作是一种度量一种字体高度的元素,因此,对于12pt字体,1em是该字体的高度,2em是该高度的两倍。注意,对于12px字体,2em是24像素。所以10px通常是标准字体的0.63em,因为“大多数”浏览器基于16px=1em作为标准字体大小。