现在WebKit page-zoom bug已经fixed，使用基于em的媒体查询而不是基于像素的媒体查询的主要原因是什么？
恩惠
我正在为我的问题添加赏金，因为有很多杰出的CSS frameworks and web developers使用了基于em的媒体查询我相信必须有充分的理由这样做。
我所知道的一个优点是，如果用户在其浏览器中更改默认字体大小，则内容将squeeze的方式与page-zoom fix解决的问题类似。是否有任何数据显示人们确实更改了默认大小而不是缩放？
注意
为了使我的问题更集中，我删除了两个外围项目。 original post将为@ nwalton的伟大answer添加视角，它解决了我提出的所有三点。
答案 0 :(得分：56)
在现代浏览器中，如果浏览器正确处理缩放，则基于em和基于像素的媒体查询之间应该没有区别。 我实际上在一个项目中遇到基于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进行媒体查询，因为它们非常可靠，而且就像你说的那样，它们可以放大。 更新但是，如果用户更改了默认样式表，您的媒体查询将会关闭。
Ems非常适合制作灵活的网格和测量。例如，如果在ems中指定了容器宽度，我可以使用一个声明按比例调整容器及其内容在我的媒体查询中。
在此示例中，调整字体大小也会按比例调整其容器大小。
h1.title {
font-size: 2em;
width: 20em;
background-color: #baff1e;
}
@media (min-width: 400px) {
h1 {
font-size: 2.5em
}
}
我实际上并没有使用rem，但我可以看到为什么很多人都喜欢它。你有一个相对单位的力量，但你不必处理你投入CSS级联时可能发生的疯狂的事情。
根据浏览器的基本字体大小调整大小似乎就像网络标准一样，因为那时你允许浏览器的最佳基本字体大小可能不是16px。但在实践中，它的另一种方式是有效的。从我所看到的情况来看，浏览器使用16px作为基本字体大小，因为这是每个人都期望的，并且将CSS测量的实际大小设置为在浏览器中看起来不错。
这已经有很长一段时间了，现在我不知道有什么理由不使用它。有一个2007 article on A List Apart，他们做了一些测试，发现当基础字体在100%声明并且文本大小为em时，浏览器的字体大小更可靠。但是，如果列出的任何浏览器约束确实相关，我会感到惊讶。我仍然很难将基本字体大小设置为10px，但这可能仅仅是个人偏好。
在做了一些测试之后，我正在改变我使用像素进行媒体查询的做法。我现在推荐em：
用户确实会更改其基本字体大小。 Mozilla支持网络上的一个帖子"How can I increase the browser default font size?"拥有超过5,000个视图。 a similar thread已超过15,000。 Another study发现一定比例的用户（0.3％）的默认字体大小小于或大于“中等”。用户实际更改它的频率似乎无关紧要（参见a previous SO answer）。如果有人这样做，可能值得支持他们。
Ems可能更具前瞻性。它们适用于最佳默认字体大小不 16px（以及那些）的任何设备。
最让我信服的是看到它在行动。 Here's a codepen demo. 请注意，浏览器的缩放可能没什么区别（我在Chrome中测试过）。但是，如果您实际进入浏览器的设置并将默认字体大小从“中”更改为其他内容，则宽度会偏离。在我看来，这是不可接受的。
答案 1 :(得分：31)
我还没有找到任何专门针对更改基本字体大小的用户的数据，但我检查了一些网站，这些网站是由应该知道他们正在做什么的人设计的。我一直在考虑是否使用px或em来指定媒体查询。虽然这可能无法完全回答这个问题，但我认为它为讨论增添了一些有趣的方面。
此列表并非详尽无遗或以任何方式进行衡量，除非它包含了我个人或团体的名字，他们似乎站在网站开发的最前沿，或者为响应式设计实践做出了贡献。某种方式。
值得注意的一件事是，最后一个条目是Nicholas Gallagher，他是将媒体查询行添加到HTML5 Boilerplate CSS的人。在该代码中，他使用em，但在他的个人网站上，媒体查询在px中设置。我寻找有关该提交的讨论，但无法找到。
再次，一些分散的列表，但它包含一些我认为值得关注的网站。其中大部分都是由前一份清单上的人全部或部分建造的。
HTML5 Boilerplate的一个有趣的注释，主要项目的CSS使用em，而项目的移动版使用px。
实际上真的很奇怪the most popular sites on the web中很少有媒体查询。以下是一些使用媒体查询的人。
尚无定论。
看起来人们正在使用这两种方法取得成功，而且似乎并没有就最佳实践达成一致。
我有种感觉，一些更先进的设计师正在转向em，但我没有其他数据，只有它似乎＆＃34;似乎＆＃34;可能就是这样。上面列出的一些网站也可能比其他网站更旧，并且由于人们开始转向使用基于em的媒体查询，因此尚未更新。很难真正获得足够的数据来在这方面得出一个好的结论。
然而，世界上一些最大的网站正在使用px的事实告诉我，这种方法必须可能仍然在技术上合理。如果它存在重大问题，我确信较大的网站会从用户或测试中听到它，并转而采用技术上更可行的方式为观众提供服务。
答案 2 :(得分：20)
使用基于EM的媒体查询有一个主要原因，那就是
尊重用户（基本）字体大小设置
没有破坏你的布局！
你真的永远不应该在像素中定义字体大小（也不要在元素宽度/高度上定义）！
让用户决定他喜欢看你网站的字体大小。
所以这是一个无障碍问题。
如果您使用像素值，则必须假定某个（基本）字体大小，通常是＆＃34;＆＃34; 16px的。但并非总是如此，这就是重点。因此，如果用户选择了更小或更大（基本）的字体大小，您的布局就会崩溃。
或者在桌面系统上，如果用户使用浏览器的缩放功能，他将获得一个水平滚动条（这是最不希望的）。
使用EMs等相关单位可以避免所有这些。它们没有任何缺点。
值得一提的是，实际上，基本字体大小设置以及移动浏览器（平板电脑和手机等触控设备）上的缩放功能与桌面版本相比有所不同。对于移动浏览器版本，字体大小设置不像桌面浏览器那样起着如此重要的作用。但是，通过使用基于EM的媒体查询，您再没有做错任何事。而且这就是＆＃34;未来的证明＆＃34;尽可能。
您可以轻松使用＆＃34; 62.5％技术＆＃34;以及。
请注意，新的＆＃34; root em＆＃34;字体大小取决于（根页）字体大小的根元素，即html元素，而不是body元素。
使用＆＃34; 62.5％技术＆＃34;没有破坏可访问性：
html {
font-size: 62.5%; /* with the standard base font size of 16px this will be equal to 10px */
}
body {
font-size: 160%; /* 160% of 10px ~ 16px, understood by all browsers */
font-size: 1.6rem; /* 1.6 * 10px ~ 16px, understood by all major browsers and IE9+ */
}
因此，您可以rem使用px（除以10），
但不会对用户的设置造成任何伤害！
无论用户选择的基本字体大小如何，字体比率始终保持不变 还有你的布局！ ; - ）
最后一句话：
始终使用min|max-width媒体查询，绝不使用device-width！简而言之，原因是您根据内容布局和设置断点，而不是任何设备的分辨率！
因此，通过使用相对单位（如EMs）来确定布局和字体大小，您的设计确实是“响应式”＃34;通过使用绝对单位（如PX），它不是！