赏金
我给我的问题增加了一个赏金，因为这么多突出CSS and and web developers使用基于电子的媒体查询，我相信有一定的理由必须有这样做。
我知道的一个优点是，如果用户在他们的浏览器中更改默认字体大小，内容将squeeze以类似于由page-zoom fix解决的问题的方式。是否有任何数据，显示人们实际上改变默认大小而不是放大？
注意
为了使我的问题更集中，我删除了两个外围项目。 original post将添加透视到@ nwalton的伟大的answer，它解决了我问的所有三点。
解决方法
>我看到的最大的问题是可以用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中测试)。但是，如果你实际上进入你的浏览器的设置，并将默认字体大小从“中”到其他，宽度是关闭。在我看来，这是不可接受的。
