看看这篇 CSS-Tricks 上的精彩文章:

• Px-em -%-pt-关键字

摘自文章:

文件

可以用来声明字体大小的最后一个度量单位是点值(pt)。点是一个测量单位，用于现实生活中的油墨印刷。72分 = 1英寸。一英寸 = 现实生活中尺上的一英寸。屏幕上一寸也没有，根据分辨率，这是完全随意的。

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

另外，我们之所以不在屏幕显示中使用点的大小(除了这很荒谬之外) ，是因为跨浏览器的结果截然不同:

Px

如果需要细粒度控制，以像素值(px)调整字体大小是一个很好的选择(这是我的最爱)。在计算机屏幕上，它不会比单个像素更精确。使用像素大小的字体，你实际上是告诉浏览器呈现的字母正好是像素高度的数目:

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

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

“大”把父代的16px 变成了20px，增加了25% 。

过去，像素在易访问性和可用性方面的问题一直得不到很好的解决。在 IE6及以下版本中，字体大小设置为像素 不能被用户调整大小。这意味着我们这些年轻健康的设计师可以设置12px 的字体，在屏幕上阅读，但是当人们在牙齿长一点的时候去增大字体，这样他们就可以阅读了，他们不能。这真的是 IE6的错，不是我们的错，但是我们得到了我们得到的，我们必须处理它。

以像素为单位设置字体大小是最准确的(我发现这是最令人满意的)方法，但要考虑到仍在使用 IE6的访问者数量和他们的可访问性需求。我们正处在不再需要关心这个的最前沿。

这里你可以详细解释他们的不同之处

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

它的精髓(来源)

像素 是固定大小的单位，用于屏幕媒体(即在计算机屏幕上阅读)。Pixel 代表“图片元素”，正如你所知道的，一个像素就是屏幕上的一个小“正方形”。 点 传统上用于打印媒体(任何要打印在纸上的东西，等等)。一点等于七十二分之一英寸。点很像像素，因为它们是固定大小的单位，不能缩放大小。

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

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

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

如果您需要调整图像的大小，或者需要一个薄边框，那么像素非常适合。

百分比对于字体大小非常有用，因为如果你一直使用它们，你会得到与用户偏好成比例的字体大小。

当您希望元素根据字体大小调整自身大小时，Ems 非常有用(因此，如果字体大小更大，段落可能会更宽)

诸如此类。

Pt 是“ point”的一个派生词(缩写) ，历史上在印刷字体的字面上使用，通常“测量”大小为“ point”，其中1 point 的大约测量值为1/72英寸，因此72 point 字体的大小为1英寸。

编辑: 注意澄清 大约有72(72.272)点在一英寸或2.54厘米。这个观点最早是由米兰的排版设计师弗朗西斯科 · 托尼埃拉 · 达 · 诺瓦拉(约1490-1589)在他1517年的字母表 L‘ Alphabeto 中确立的。(你可以搜寻这些资料的不同参考资料)

px是“像素”的缩写，它是一个简单的“点”，在屏幕或点矩阵打印机或其他打印机或设备上呈现一个点时尚-与老式打字机有一个固定的大小，坚实的前锋留下一个印记的字符，通过按一个带子，从而留下一个固定大小的图像。

与点密切相关的术语是“大写”和“小写”，这两个术语在历史上与选择固定的印刷字符有关，其中“大写”字符放在盒子(大小写)上面，而非大写字符放在下面的盒子里，因此是“小写”大小写。

对于不同的排版字体和大小，有不同的盒子(盒子) ，但是每个盒子都有“大”和“小”的盒子。

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

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

此外，办公室使用的打字机有“精英”和“异食癖”两种尺寸，分别是每英寸10个和12个字符。

此外，“点”，在标准化之前是根据金属排字师“脚”的大小，一个字符的基本足迹的大小，并在大小上有所不同。

请注意，一个排印“脚”最初是从一个已故的打印机实际脚。一个印刷字体的脚包含72个比卡或864个点。

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

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

px≠像素

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

阅读这篇来自 W3C，EM，PX，PT，CM，IN...的文章，关于 px是如何成为一个为 CSS 发明的“神奇”单元。px的含义因硬件和分辨率的不同而不同。(这篇文章是最新的，最后更新于2014-10年。)

我自己的想法: 1px 是设计师设计的几乎看不见的细线的大小。

引用 那篇文章的话:

Px 单元是 CSS 的神奇单元。它与当前字体无关，也与绝对单位无关。Px 单元被定义为小但可见，这样一个水平1px 宽线可以显示锐利的边缘(没有反锯齿)。什么是锋利的，小的和可见的取决于设备和它的使用方式: 你把它举到你的眼睛附近，像一个移动电话，在胳膊的长度，像一个计算机显示器，或之间的地方，像一本书？因此，px 不被定义为一个常量长度，而是一个取决于设备类型及其典型用途的东西。

为了了解像素的外观，想象一下20世纪90年代的 CRT 电脑显示器: 它能显示的最小点大约是1/100英寸(0.25毫米)或者更小。Px 单元的名字来源于屏幕上的像素。

现在有些设备原则上可以显示较小的尖点(尽管你可能需要一个放大镜才能看到它们)。但是上个世纪在 CSS 中使用 px 的文档看起来仍然是一样的，不管是什么设备。尤其是打印机，它可以显示比1px 小得多的细节清晰的线条，但即使在打印机上，1px 的线条看起来也和在电脑显示器上看起来非常相似。设备会更改，但是 px 总是具有相同的视觉外观。

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

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

现在我说出来了，我已经可以听到一群千里眼正在靠近，他们的横幅上写着“ px 与像素无关”。他们为自己知道得更清楚而感到自豪，他们查阅每一条包含原始真相的评论，并详细解释它是错误的、不正确的、误导性的等等。

是的，他们有一个观点——一个非常具体的时间点，实际上，叫做 iPhone4。
事情是这样的。

平静的日子

在视网膜显示之前，一个像素是一个像素。因为根据人类的逻辑，事情就应该是这样的。你在屏幕上放一个像素线，然后把它放大，就是这样: 它只有一个像素宽。在许多硬件上，包括现代硬件，情况仍然是这样，所以说1px = 1像素是完全不正确的。

但是。

那时候，有一天，iPhone3紧随其后，iPhone4的 X 和 Y 分辨率都提高了一倍，Safari 的开发者担心所有的网页看起来都很滑稽，特别是因为许多网页开发者依赖于稳定的320x480分辨率。所以只要创建一个640x960像素的区域，就可以杀死大多数网站。在这一点上，有人花了数十亿美元引入了一个神奇的怪兽: 一个称为 -webkit-min-device-pixel-ratio的 CSS 功能——在 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 有趣的是它实际上被转换为 px，所以这只是指定像素大小的一种更糟糕的方法。这是 计算器。点(因为它们来自印刷世界)开始有意义，当你打印的东西，但今天有更好的选择，这取决于你需要什么-所以 tbh，点几乎从来不需要。