>在现代浏览器中，如果浏览器正确处理缩放，基于em和media-based的媒体查询应该没有区别。我实际上在一个项目中基于em的媒体查询有麻烦，因为在其中一个媒体查询基本字体大小更改，然后所有其他媒体查询都搞乱了。这可能只是一个愚蠢的错误，但你得到的想法。我会去像素。请参阅下面的更新。虽然缩放对现代浏览器没有影响，基本字体大小仍然。
>我看到的最大的问题是可以用62.5％的技术，rem是如果你遇到不了解它的浏览器。如果你担心，你可以添加一个后备的能力较弱的浏览器，并设置rem的现代。

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

>如果浏览器处理px和em的速度有什么不同，那就不明显了。浏览器计算CSS真的，真的很快(比JS快得多)。所以这可能不值得担心。

测量优点，缺点和用途

px

我已经使用px的媒体查询过去，因为他们是如此可靠，像你说，他们缩放很好。更新：但是，如果用户更改其默认样式表，您的媒体查询将关闭。

>独立于CSS级联
>大多数非相对测量(只取决于浏览器如何测量字体像素)
>缩放到所有现代浏览器

em

Ems是令人敬畏的灵活网格和测量。例如，如果在ems中指定了容器宽度，我可以使用一个声明在我的媒体查询中按比例调整容器及其内容的大小。

>响应CSS级联
>相对于容器字体大小
>缩放到所有现代浏览器

在此示例中，调整字体大小还会按比例调整其容器大小。

h1.title {
  font-size: 2em;
  width: 20em;
  background-color: #baff1e;
}

@media (min-width: 400px) {
  h1 {
    font-size: 2.5em
  }
}

rem

我没有实际使用rem很多，但我可以看到为什么很多人喜欢它。你有一个相对单位的力量，但你不必处理的疯狂的东西，当你扔在CSS级联中可能发生。

基于浏览器的基本字体大小调整大小似乎像web标准的事情，因为那么你允许浏览器的最佳基本字体大小可能不是16px。在实践中，虽然，它的工作原理另一种方式。从我看到的，浏览器使用16px作为基本字体大小，因为这是每个人都期望，并设置CSS测量的实际大小在浏览器中看起来体面。

>独立于CSS级联
>相对于基本字体大小
>缩放到所有现代浏览器

关于62.5％技术的注释

这已经在一段时间了，现在我不知道任何理由不使用它。有一个2007 article on A List Apart，他们做一些测试，发现字体大小显示更可靠的跨浏览器，当基本字体宣布为100％和文本大小为em。但是，如果列出的任何浏览器约束真的相关，我会感到惊讶。我仍然有一个很难的时候感觉良好的设置我的基本字体大小为10px，但这可能只是个人喜好。

更新

做了一些测试后，我扭转了我对媒体查询使用像素的做法。我现在推荐em：

>用户确实更改其基本字体大小。 Mozilla支持网络上的一个线程，“How can I increase the browser default font size?”有5000多个视图。和a similar thread有超过15,000。 Another study找到了一个默认字体大小小于或大于“中”的用户百分比(0.3％)。用户实际改变它的频率似乎无关紧要(见a previous SO answer)。如果有些人做，可能值得支持他们。
> Ems可能更加面向未来。它们将适用于最佳默认字体大小不是16像素(以及那些)的任何设备。
>最让我信服的事情是在行动中看到它。 Here’s a codepen demo.请注意，浏览器的缩放可能没有什么区别(我在Chrome中测试)。但是，如果你实际上进入你的浏览器的设置，并将默认字体大小从“中”到其他，宽度是关闭。在我看来，这是不可接受的。