我正在设计一个新的网站，我希望它能与尽可能多的浏览器和浏览器设置兼容。我试图决定我应该使用什么测量单位的字体和元素的大小，但我无法找到一个结论性的答案。
我的问题是:我应该在CSS中使用px还是rem ?
到目前为止，我知道使用px不兼容那些在浏览器中调整基本字体大小的用户。 我忽略了ems，因为与rem相比，它们在级联时维护起来更麻烦。 有人说rem是分辨率独立的，因此更可取。但也有人说，大多数现代浏览器对所有元素都一视同仁，所以使用px不是问题。
我问这个问题是因为关于CSS中最理想的距离度量有很多不同的意见，我不确定哪个是最好的。
当前回答
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单元的链接，这应该会对你的决定有很大帮助。
这篇文章很好地描述了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 */
作为条件反射的回答，我建议使用rem，因为它允许您在必要时一次性更改整个文档的“缩放级别”。在某些情况下，当您希望大小相对于父元素时，请使用em。
但是对rem的支持是参差不齐的，IE8需要一个填充物，Webkit正在显示一个错误。此外，亚像素计算有时会导致单像素线等内容消失。补救办法是对这些非常小的元素进行像素编码。这就带来了更多的复杂性。
所以，总的来说，问问自己这样做是否值得——在CSS中改变整个文档的“缩放级别”有多重要，有多可能?
有些情况下答案是肯定的，有些情况下答案是否定的。
因此，这取决于您的需求，您必须权衡利弊，因为使用rem和em与“正常的”基于像素的工作流相比引入了一些额外的考虑因素。
请记住，它很容易切换(或更确切地说转换)你的CSS从px到rem (JavaScript是另一个故事)，因为下面两个CSS代码块将产生相同的结果:
html {
}
body {
font-size:14px;
}
.someElement {
width: 12px;
}
html {
font-size:1px;
}
body {
font-size:14rem;
}
.someElement {
width: 12rem;
}
TL;DR:使用px。
事实
First, it's extremely important to know that per spec, the CSS px unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec. CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the px unit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels. That said, up until 2010 (and the mobile zoom situation notwithstanding), the px almost always did equal one physical pixel, because all widely available displays were around 96dpi. Sizes specified in ems are relative to the parent element. This leads to the em's "compounding problem" where nested elements get progressively larger or smaller. For example: body { font-size:20px; } div { font-size:0.5em; } Gives us: <body> - 20px <div> - 10px <div> - 5px <div> - 2.5px <div> - 1.25px The CSS3 rem, which is always relative only to the root html element, is now supported on 99.67% of all browsers in use.
意见
我想每个人都同意，设计你的页面是很好的，以适应每个人，并考虑到视力受损。其中一个需要考虑的问题(但不是唯一的!)是允许用户将网站的文本变大，这样就更容易阅读。
最初，为用户提供缩放文本大小的唯一方法是使用相对大小单位(例如ems)。这是因为浏览器的字体大小菜单只是改变了根字体大小。因此，如果您在px中指定字体大小，当更改浏览器的字体大小选项时，它们将不会缩放。
现代浏览器(甚至不那么现代的IE7)都改变了默认的缩放方法，只需要放大所有内容，包括图像和盒子大小。本质上，它们使参考像素变大或变小。
是的，有些人仍然可以改变他们的浏览器默认样式表来调整默认字体大小(相当于老式字体大小选项)，但这是一种非常深奥的方式，我敢打赌没有人会这样做。(在Chrome中，它被隐藏在高级设置、网页内容、字体大小下面。在IE9中，它更加隐蔽。你必须按Alt键，然后去查看，文本大小。)在浏览器的主菜单中选择缩放选项(或使用Ctrl++/-/鼠标滚轮)要容易得多。
1 -在统计误差之内，自然
如果我们假设大多数用户使用缩放选项缩放页面，我发现相对单位基本上是不相关的。当所有东西都指定在同一个单位(图像都以像素为单位处理)时，开发页面要容易得多，而且不必担心复合。(“我被告知没有数学”——要计算1.5em实际是多少。)
仅使用相对单位表示字体大小的另一个潜在问题是，用户调整字体大小可能会破坏布局的假设。例如，这可能会导致文本被剪切或运行太长。如果你使用绝对单位，你不必担心意外的字体大小会破坏你的布局。
所以我的答案是使用像素单位。所有都用px表示。当然，您的情况可能会有所不同，如果您必须支持IE6(愿rfc之神宽恕您)，那么无论如何您都必须使用ems。
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.
