这篇文章很好地描述了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 */

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

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

更新:

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

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

这篇文章很好地描述了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;
}

是的，REM和PX是相对的，但其他答案建议选择REM而不是PX，我也想用一个可访问性的例子来支持这一点。 当用户在浏览器上设置不同的字体大小时，REM会自动放大或缩小网页上的字体、图像等元素，而PX则不会。

在下面的gif中，左侧文本使用REM单位设置字体大小，而右侧字体使用PX单位设置。

正如你所看到的，当我调整大小时，REM会自动放大/缩小 网页的默认字体大小。(右下方)

网页的默认字体大小是16px，等于1 rem(只适用于默认的html页面，即html{font-size:100%})，因此，1.25rem等于20px。

附注:还有谁在使用REM?CSS框架!像Bootstrap 4, Bulma CSS等，所以最好与它相处。

一半(但只有一半)尖刻的回答(另一半是对官僚主义现实的痛苦蔑视):

使用vh

一切都是浏览器窗口的大小。

总是允许向下滚动，但禁用水平滚动。

将主体宽度设置为静态50vh，并且永远不要编写浮动或跳出父div的css(如果他们试图模拟一些看起来像这样的东西，聪明地使用背景gif会让他们偏离轨道)。样式只使用表，所以所有东西都按照预期严格地保持在适当的位置。包括一个javascript函数来撤销用户可能做的任何ctrl+/-活动。

用户会讨厌你，因为网站不会因为他们使用的内容而发生变化(比如文本太小，在手机上无法阅读)。你的同事会讨厌你的，因为没有哪个头脑正常的人会这么做，这很可能会影响他们的工作(当然不会影响你的工作)。你的编程教授会讨厌你，因为这不是一个好主意。你的用户体验设计师会讨厌你，因为这将暴露他们在设计用户体验模型时为了赶在最后期限前做的事情。

几乎所有人都会讨厌你，除了那些告诉你要让东西与模型匹配并快速这么做的人。然而，这些人(通常包括项目经理)会为你的准确性和快速周转时间而欣喜若狂。每个人都知道他们的意见是唯一影响你薪水的因素。