English 我正在设计一个新网站，希望它与尽可能多的浏览器和浏览器设置兼容。我试图确定我应该使用哪种度量单位来显示字体和元素的大小，但无法找到一个确定的答案。
我的问题是：我应该在CSS中使用px还是rem在CSS中使用？
px与在浏览器中调整基本字体大小的用户不兼容。ems，因为与rems 相比，它们在级联时更加麻烦。rems与分辨率无关，因此更可取。但是其他人则说，大多数现代浏览器无论如何都会对所有元素进行同样的缩放，因此使用px并不是问题。我之所以这样问是因为，对于CSS中最理想的距离度量有很多不同的看法，我不确定哪个是最好的。
EM仅可扩展用于处理+/-缩放的媒体查询，而人们一直在这样做，而不仅仅是盲人。这是另一个为什么原因如此写得很好的专业演示。
顺便说一下，这就是Zurb Foundation使用ems的原因，而劣等的Bootstrap 3仍然使用pixel的原因。
em是前进的方向，不仅是字体，而且您还可以将它们与框，线宽和其他内容一起使用，为什么呢？
简而言之，em是唯一与浏览器中的alt +和alt-键一起缩放的缩放器。
其他测量可以缩放，但不如em干净。
顺便说一句，如果您想获得最佳的缩放比例，也请尽可能将图形转换为基于矢量的SVG，因为这些也可以随浏览器的缩放比例进行完美缩放。
Yes, REM and PX are relative yet other answers have suggested to go for REM over PX, I would also like to back this up using an accessibility example.
When user sets different font-size on browser, REM automatically scale up and down elements like fonts, images etc on the webpage which is not the case with PX.
在下面的gif中，左侧文本使用字体大小REM单位设置，而右侧字体则通过PX单位设置。
如您所见，当我调整网页的默认字体大小时，REM正在自动放大/缩小。（右下）
网页的默认字体大小是16px，等于1 rem（仅用于默认html页面，即html{font-size:100%}），因此1.25rem等于20px。
PS：还有谁在使用REM？CSS框架！例如Bootstrap 4，Bulma CSS等，因此更好地相处。
一半（但只有一半）刻板的答案（另一半是对官僚主义现实的不屑一顾）：
使用vh
一切都始终按照浏览器窗口的大小调整。
始终允许向下滚动，从不向侧面滚动。
将主体宽度设置为静态50vh，并且没有任何浮点或突破父div。而且仅使用表格进行样式设置，因此所有内容都可以按预期严格地固定到位。包括一个javascript函数，以撤消用户可能执行的任何ctrl +/-活动。
除了那些告诉你使事情与他们的模型相符的人之外，每个人都会恨你，他们会欣喜若狂。每个人都知道他们的意见是唯一重要的意见。
pt与相似rem，因为它是相对固定的，但几乎总是与DPI无关，即使不兼容的浏览器都px以与设备有关的方式进行处理。 rem根元素的字体大小会有所不同，但是您可以使用Sass / Compass之类的工具通过来自动执行此操作pt。
如果您有这个：
html {
font-size: 12pt;
}
然后1rem永远是12pt。 rem并且em仅与设备依赖于它们所依赖的元素无关；有些浏览器的行为不符合规范，而是按px字面意思对待。即使在网络的较早时期，1点也始终被认为是1/72英寸-也就是说，一英寸有72点。
如果您使用的是旧的，不兼容的浏览器，并且您具有：
html {
font-size: 16px;
}
然后1rem将取决于设备。对于html默认情况下将从其继承的元素，它们1em也将取决于设备。 12pt将是有希望保证的与设备无关的等效项：16px / 96px * 72pt = 12pt，其中96px = 72pt = 1in。
如果要坚持特定的单位，进行数学运算可能会变得非常复杂。例如.75em of html = .75rem = 9pt，和.66em of .75em of html = .5rem = 6pt。一个好的经验法则：
pt绝对大小。 如果您确实需要相对于根元素保持动态，则您需要太多的CSS；请参阅附录A。您需要一种可以编译为CSS的语言，例如Sass / SCSS。em的相对大小。可以很容易地说：“我希望左侧的边距大约为字母的最大宽度”，或者“使此元素的文本略大于周围的文本”。 <h1>是在ems中使用字体大小的一个很好的元素，因为它可能出现在不同的地方，但应始终大于附近的文本。这样，您不必为每个应用于的类都设置单独的字体大小h1：字体大小将自动适应。px了非常微小的尺寸。 由于尺寸非常小，pt因此在某些浏览器中的DPI为96 DPI时可能会变得很模糊，因为它们pt并px不太一致。如果只想创建一个细的一像素边框，请这样说。如果您使用的是高DPI显示屏，那么在测试过程中您将看不到这一点，因此请务必在通用的96 DPI显示屏上进行测试。作为一个反思性的答案，我建议使用rem，因为它允许您在必要时立即更改整个文档的“缩放级别”。在某些情况下，当您希望尺寸与父元素有关时，请使用em。
但是对 rem的支持参差不齐，IE8需要使用polyfill，而Webkit则存在bug。此外，子像素计算有时会导致诸如一像素线的东西消失。补救措施是为非常小的元素以像素编码。这带来了更多的复杂性。
因此，总的来说，问问自己是否值得-在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;
}
本文介绍了相当不错的优点和缺点px，em以及rem。
作者最后得出结论，最好的方法可能是同时使用pxand 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 */
我发现对网站字体大小进行编程的最佳方法是为定义基本字体大小body，然后font-size在声明的其他所有内容中都使用em（或rem）。我认为这是个人喜好，但它很好地为我服务，并且使整合响应速度更快的设计变得非常容易。
就使用rem单元而言，我认为最好在代码的渐进性之间找到平衡，同时也为较旧的浏览器提供支持。 查看此链接，了解浏览器对Rem单元的支持，这将有助于您做出很多决定。
josh3736的答案是一个不错的答案，但三年后提供一个对策：
我建议使用rem单位的字体，如果仅仅是因为它更容易为你的开发人员，以改变大小。确实，用户很少会在其浏览器中更改默认字体大小，并且现代浏览器缩放会放大px单位。但是，如果老板来找您说“不要放大图像或图标，而要放大所有字体”该怎么办。只需更改根字体大小并使所有其他字体都相对缩放，然后以px数十或数百个css规则更改大小就容易得多。
我认为，px对于某些图像或某些布局元素使用单位，无论设计的大小如何，都应始终具有相同的大小，这仍然有意义。
Caniuse.com可能曾说过，josh3736在2012年发布答案时，只有75％的浏览器，但截至3月27日，他们声称支持93.78％。在他们跟踪的浏览器中，只有IE8不支持它。
是。或者，相反，不。
嗯，我的意思是，没关系。使用对您的特定项目有意义的一种。PX和EM或两者同等有效，但根据整个页面的CSS架构，其行为会有所不同。
更新：
为澄清起见，我要指出的是，通常使用哪种都无关紧要。有时，您可能特别想选择一个。如果您可以从头开始并且想要使用基本字体大小并使所有内容与之相对应，则EM很好。
在将重新设计改造到现有代码库上时，经常需要PX，并且需要px的特殊性以防止不良的嵌套问题。