pt类似于rem，因为它相对固定，但几乎总是与dpi无关，即使不兼容的浏览器以依赖于设备的方式对待px。rem随根元素的字体大小而变化，但您可以使用Sass/Compass之类的工具自动使用pt来完成此操作。

如果你有这个:

html {
    font-size: 12pt;
}

那么1rem总是12pt。Rem和em仅仅像它们所依赖的元素那样与设备无关;有些浏览器不按照spec行事，按字面意思对待px。即使在过去的网络时代，1点也一直被认为是1/72英寸——也就是说，一英寸有72个点。

如果你有一个旧的，不兼容的浏览器，你有:

html {
    font-size: 16px;
}

那么1rem是与电子器件相关的。对于默认情况下从html继承的元素，1em也依赖于设备。12pt应该是与设备无关的同等内容:16px / 96px * 72pt = 12pt，其中96px = 72pt = 1英寸。

如果你想坚持使用特定的单位，计算起来会很复杂。例如，html的.75em = .75rem = 9pt, html的.75em = .5rem = 6pt。一个很好的经验法则:

Use pt for absolute sizes. If you really need this to be dynamic relative to the root element, you're asking too much of CSS; you need a language that compiles to CSS, like Sass/SCSS. Use em for relative sizes. It's pretty handy to be able to say, "I want the margin on the left to be about the maximum width of a letter," or, "Make this element's text just a bit bigger than its surroundings." <h1> is a good element on which to use a font size in ems, since it might appear in various places, but should always be bigger than nearby text. This way, you don't have to have a separate font size for every class that's applied to h1: the font size will adapt automatically. Use px for very tiny sizes. At very small sizes, pt can get blurry in some browsers at 96 DPI, since pt and px don't quite line up. If you just want to create a thin, one-pixel border, say so. If you have a high-DPI display, this won't be obvious to you during testing, so be sure to test on a generic 96-DPI display at some point. Don't deal in subpixels to make things fancy on high-DPI displays. Some browsers might support it--particularly on high-DPI displays--but it's a no-no. Most users prefer big and clear, though the web has taught us developers otherwise. If you want to add extended detail for your users with state-of-the-art screens, you can use vector graphics (read: SVG), which you should be doing anyway.

这篇文章很好地描述了px, em和rem的优缺点。

作者最后得出结论，最好的方法可能是同时使用px和rem，在旧的浏览器中先声明px，在新浏览器中重新声明rem:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Josh3736的答案很好，但要在3年后提供一个对应的答案:

I recommend using rem units for fonts, if only because it makes it easier for you, the developer, to change sizes. It's true that users very rarely change the default font size in their browsers, and that modern browser zoom will scale up px units. But what if your boss comes to you and says "don't enlarge the images or icons, but make all the fonts bigger". It's much easier to just change the root font size and let all the other fonts scale relative to that, then to change px sizes in dozens or hundreds of css rules.

我认为对于某些图像使用px单位仍然是有意义的，或者对于某些布局元素，无论设计的规模如何，都应该始终保持相同的大小。

2012年josh3736发表他的回答时，Caniuse.com可能说只有75%的浏览器支持，但截至3月27日，他们声称93.78%的浏览器支持。在他们追踪的浏览器中，只有IE8不支持。

是的。或者，更确切地说，没有。

呃，我是说，没关系。使用对您的特定项目有意义的方法。PX和EM或两者都有效，但根据整个页面的CSS架构的不同，它们的行为会有所不同。

更新:

为了澄清，我的意思是，通常情况下，使用哪一种并不重要。有时，您可能特别希望选择其中一种。如果你可以从头开始，想要使用基本字体大小，并使所有内容都与之相关，那么EMs是很好的。

当您在现有代码基础上进行重新设计时，通常需要px，并且需要px的专一性来防止糟糕的嵌套问题。

pt类似于rem，因为它相对固定，但几乎总是与dpi无关，即使不兼容的浏览器以依赖于设备的方式对待px。rem随根元素的字体大小而变化，但您可以使用Sass/Compass之类的工具自动使用pt来完成此操作。

如果你有这个:

html {
    font-size: 12pt;
}

那么1rem总是12pt。Rem和em仅仅像它们所依赖的元素那样与设备无关;有些浏览器不按照spec行事，按字面意思对待px。即使在过去的网络时代，1点也一直被认为是1/72英寸——也就是说，一英寸有72个点。

如果你有一个旧的，不兼容的浏览器，你有:

html {
    font-size: 16px;
}

那么1rem是与电子器件相关的。对于默认情况下从html继承的元素，1em也依赖于设备。12pt应该是与设备无关的同等内容:16px / 96px * 72pt = 12pt，其中96px = 72pt = 1英寸。

如果你想坚持使用特定的单位，计算起来会很复杂。例如，html的.75em = .75rem = 9pt, html的.75em = .5rem = 6pt。一个很好的经验法则:

Use pt for absolute sizes. If you really need this to be dynamic relative to the root element, you're asking too much of CSS; you need a language that compiles to CSS, like Sass/SCSS. Use em for relative sizes. It's pretty handy to be able to say, "I want the margin on the left to be about the maximum width of a letter," or, "Make this element's text just a bit bigger than its surroundings." <h1> is a good element on which to use a font size in ems, since it might appear in various places, but should always be bigger than nearby text. This way, you don't have to have a separate font size for every class that's applied to h1: the font size will adapt automatically. Use px for very tiny sizes. At very small sizes, pt can get blurry in some browsers at 96 DPI, since pt and px don't quite line up. If you just want to create a thin, one-pixel border, say so. If you have a high-DPI display, this won't be obvious to you during testing, so be sure to test on a generic 96-DPI display at some point. Don't deal in subpixels to make things fancy on high-DPI displays. Some browsers might support it--particularly on high-DPI displays--but it's a no-no. Most users prefer big and clear, though the web has taught us developers otherwise. If you want to add extended detail for your users with state-of-the-art screens, you can use vector graphics (read: SVG), which you should be doing anyway.

我发现对网站的字体大小进行编程的最好方法是为正文定义一个基本字体大小，然后对此后声明的所有其他字体大小使用em's(或rem's)。我想这是我的个人偏好，但它对我很有帮助，也让我很容易融入更具响应性的设计。

至于使用rem单元，我认为在代码的渐进性和对旧浏览器的支持之间找到一个平衡是很好的。看看这个关于浏览器支持rem单元的链接，这应该会对你的决定有很大帮助。