切换到基于 Em 的媒体查询

Question

既然 WebKit page-zoom bug 已经是 fixed，那么使用基于 em 的媒体查询而不是基于像素的媒体查询的主要原因是什么？

赏金

我正在为我的问题添加一个赏金，因为这么多著名的 CSS frameworks and web developers 使用基于 em 的媒体查询，我相信一定有充分的理由这样做。

我知道的一个优点是，如果用户更改浏览器中的默认字体大小，内容将以类似于page-zoom fix 解决的问题的方式squeeze。是否有任何数据表明人们确实更改了默认大小而不是缩放？

注意

为了使我的问题更加集中，我删除了两个外围项目。 original post 将为 @nwalton 的伟大 answer 添加视角，它解决了我询问的所有三点。

Answer 1

我还没有找到任何专门关于更改基本字体大小的用户的数据，但我对那些应该知道自己在做什么的人设计的网站做了一些检查。我专门研究他们是否使用px 或em 来指定他们的媒体查询。虽然这可能无法完全回答这个问题，但我认为它为讨论增加了一些有趣的维度。

一些主要参与者

这个列表绝不是详尽的或以任何方式衡量的，除了它包括我脑海中似乎处于网络开发前沿的个人或团体的名字，或者对响应式设计实践做出了贡献某种方式。

• Filament Group: em
• Luke Wroblewski: em
• Jeffrey Zeldman: 像素
• Chris Coyier: em
• Ethan Marcotte（又名The Father of Responsive Web Design）：px
• Jason Santa Maria: 像素
• Mark Boulton: 像素
• Nicholas Gallagher: 像素

需要注意的一件有趣的事情是，最后一个条目 Nicholas Gallagher 是将媒体查询行添加到 HTML5 Boilerplate CSS 的人。在该代码中，他使用em，尽管在他的个人网站上，媒体查询设置为px。我寻找有关该提交的讨论，但找不到任何内容。

他们的一些网站

再次，有点分散的列表，但它包含一些我认为值得一看的网站。其中大部分已全部或部分由上一个列表中的人员构建。

• Boston Globe (Filament Group, 2011): px
• A List Apart: em
• dribbble (Dan Cederholm): px
• HTML5 Boilerplate: em
• HTML5 Mobile Boilerplate: 像素

一个关于 HTML5 Boilerplate 的有趣注释，主项目的 CSS 使用 em，而项目的移动版本使用 px。

大型网站

真正令人惊讶的是，the most popular sites on the web 中很少有人有任何媒体查询。以下是一些使用媒体查询的人。

• Microsoft: 像素
• Twitter: 像素
• Wordpress.com: em
• Adobe.com: 像素

结论

不确定。

看起来人们成功地使用了这两种方法，但似乎没有就最佳实践达成一致。

我感觉一些更进步的设计师正在转向em，但我没有其他数据，只是“似乎”可能是这种情况。也可能是上面列出的一些网站比其他网站更老，并且自从人们开始转向基于 em 的媒体查询以来就没有更新过。很难真正获得足够的数据来在这方面得出一个好的结论。

然而，世界上一些最大的网站正在使用px 的事实告诉我，这种方法必须在技术上可能仍然是合理的。如果它存在重大问题，我相信较大的网站会从他们的用户或他们的测试中听到它，并转向技术上更可行的东西来服务他们的受众。

Answer 2

1. 在现代浏览器中，如果浏览器正确处理缩放，则基于 em 和基于像素的媒体查询应该没有区别。 实际上，我在一个项目中遇到了基于 em 的媒体查询的问题，因为在其中一个媒体查询中，基本字体大小发生了变化，然后所有其他媒体查询都搞砸了。这可能只是一个愚蠢的错误，但你明白了。我会选择像素。 请参阅下面的更新。虽然缩放对现代浏览器没有影响，但基本字体大小仍然有效。

2. 我看到您使用 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; }
   

3. 如果浏览器处理 px 与 em 的速度有任何差异，则不会很明显。浏览器计算 CSS 真的非常快（比 JS 快得多）。所以这可能不值得担心。

---

测量的优点、缺点和用途

像素

我过去曾使用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 我并没有真正用过很多，但我明白为什么很多人喜欢它。您拥有相对单位的力量，但您不必处理在 CSS 级联中可能发生的疯狂事情。

根据浏览器的基本字体大小调整大小似乎是网络标准要做的事情，因为这样您就可以允许最佳基本字体大小可能不是 16 像素的浏览器。然而，在实践中，它有点相反。据我所见，浏览器使用16px 作为基本字体大小，因为这是每个人都期望的，并将该 CSS 测量的实际大小设置为在浏览器中看起来不错。

• 独立于 CSS 级联
• 相对于基本字体大小
• 在所有现代浏览器中均可缩放

---

关于 62.5% 技术的说明

这已经存在了很长一段时间，现在我不知道有什么理由不使用它。有一个2007 article on A List Apart，他们在其中进行了一些测试，发现当在100% 声明基本字体并且在em 中声明文本大小时，字体大小在浏览器中显示更可靠。但是，如果那里列出的任何浏览器约束真的不再相关，我会感到惊讶。我仍然很难将我的基本字体大小设置为 10px，但这可能只是个人喜好。

---

更新

在进行了一些测试之后，我正在改变使用像素进行媒体查询的做法。我现在推荐em：

1. 用户确实会更改其基本字体大小。 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）。如果有人这样做，可能值得支持他们。

2. Ems 可能更具前瞻性。它们适用于任何最佳默认字体大小为非 16px（以及那些）的设备。

3. 最让我信服的是亲眼目睹它的实际应用。 Here's a codepen demo. 请注意，浏览器的缩放可能没有任何区别（我在 Chrome 中测试过）。但是，如果您实际上进入浏览器的设置并将默认字体大小从“中等”更改为其他大小，那么宽度就大不相同了。在我看来，这是不可接受的。

Answer 3

使用基于 EM 的媒体查询的主要原因之一是
尊重用户（基本）字体大小设置
不会破坏您的布局！

你真的不应该以像素为单位定义字体大小（也不要定义元素的宽度/高度）！！！
让用户决定他喜欢看您网站的字体大小。

所以这是一个可访问性的问题。

如果您使用像素值，则必须假设某个（基本）字体大小，“通常”为 16 像素。但并非总是如此，这就是重点。因此，如果用户选择了更小或更大（基本）的字体大小，您的布局就会崩溃。

或者在桌面系统上，如果用户使用浏览器的缩放功能，他会得到一个水平滚动条（这通常是不受欢迎的）。

所有这些都可以通过使用像EMs 这样的相对单位来避免。而且它们没有缺点。

还值得一提的是，移动浏览器（在平板电脑和智能手机等触控设备上）的基本字体大小设置和缩放功能与桌面浏览器的工作方式不同。对于移动浏览器版本，字体大小设置不像桌面浏览器那样重要。但是再次使用基于EM 的媒体查询，您不会做错任何事。恕我直言，这是尽可能“面向未来”的。

您也可以轻松使用“62.5% 技巧”。
请注意，新的“root em”字体大小取决于（页面的）根元素的字体大小，即html 元素，而不是body 元素。

在不破坏可访问性的情况下使用“62.5% 技巧”：

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），您的设计实际上是“响应式”的。通过使用绝对单位（如PX），它不是！