CSS 切换到基于 Em 的媒体查询

Switching to Em-Based Media Queries

提问by cantera

Now that the WebKit page-zoom bughas been fixed, what are the main reasons for using em-based media queries rather than pixel-based media queries?

现在 WebKit页面缩放错误已修复，使用基于 em 的媒体查询而不是基于像素的媒体查询的主要原因是什么？

Bounty

赏金

I'm adding a bounty to my question because so many prominent CSSframeworksandwebdevelopersuse em-based media queries that I'm convinced there must be good reason(s) for doing so.

我为我的问题增加了悬赏，因为如此多的著名CSS框架和Web开发人员使用基于 em 的媒体查询，我相信这样做一定有充分的理由。

The one advantage I'm aware of is that if a user changes the default font size in their browser, content will squeezein a manner similar to the issue solved by the page-zoom fix. Is there any data to show people actually do change the default size rather than zoom?

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

Note

笔记

To make my question more focused, I removed two peripheral items. The original postwill add perspective to @nwalton's great answer, which addressed all three points I asked about.

为了让我的问题更集中，我删除了两个外围项目。在原来的职位将增加的角度来@ nwalton的伟大答案，其中涉及所有的三点我问。

采纳答案by nwalton

1. In modern browsers there should be no difference between em-based and pixel-based media queries if the browser handles the zoom correctly. I actually had trouble with em-based media queries in one project because in one of the media queries the base font size changed and then all of the other media queries got messed up. That may have just been a stupid mistake, but you get the idea. I'd go with pixels.See update below.While zoom does not have an effect on modern browsers, base font size still does.

2. The biggest problem I see you could run into with the 62.5% technique and remis if you run into browsers that don't understand it. If you're worried about that you could add a fallback for less-capable browsers, and set remfor the modern ones.

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

3. If there's any difference in how fast browsers process pxvs em, it's not noticeable. Browsers calculate CSS really, really fast (much faster than JS). So it's probably not worth worrying about.

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 快得多）。所以这可能不值得担心。

---

---

Measurement pros, cons, and uses

测量的优缺点和用途

px

像素

I have used pxfor media queries in the past because they're so reliable and, like you say, they zoom just fine. Update:However, if a user changes their default style sheet, your media queries will be off.

我过去曾px用于媒体查询，因为它们非常可靠，而且就像您说的那样，它们缩放得很好。更新：但是，如果用户更改了他们的默认样式表，您的媒体查询将关闭。

• Independent of CSS cascade
• Mostly non-relative measurement (just depends on how the browser measures font pixels)
• Zoomable in all modern browsers

• 独立于 CSS 级联
• 主要是非相对测量（仅取决于浏览器如何测量字体像素）
• 可在所有现代浏览器中缩放

em

em

Ems are awesome for making flexible grids and measurements. For example, if a container width is specified in ems, I can proportionally resize the container and its contents in my media queries with one declaration.

Ems 非常适合制作灵活的网格和测量。例如，如果在 em 中指定了容器宽度，我可以通过一个声明在媒体查询中按比例调整容器及其内容的大小。

• Responds to the CSS cascade
• Relative to the container font size
• Zoomable in all modern browsers

• 响应 CSS 级联
• 相对于容器字体大小
• 可在所有现代浏览器中缩放

In this example, resizing the font also resizes its container proportionally.

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

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

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

rem

雷姆

I haven't actually used remmuch, but I can see why a lot of people like it. You've got the power of a relative unit, but you don't have to deal with the crazy stuff that can happen when you throw in the CSS cascade.

我实际上并没有使用rem多少，但我明白为什么很多人喜欢它。您已经获得了相对单位的力量，但是您不必处理在您投入 CSS 级联时可能发生的疯狂事情。

Sizing things based on the browser's base font size seems like the web-standards thing to do, because then you allow for browsers whose optimal base font size might not be 16px. In practice, though, it kind of works the other way. From what I've seen, browsers use 16pxas the base font size because that's what everyone expects, and set the actual size of that CSS measurement to look decent in the browser.

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

• Independent of CSS cascade
• Relative to base font size
• Zoomable in all modern browsers

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

---

---

A note on the 62.5% technique

关于 62.5% 技术的说明

This has been around for quite awhile, and right now I don't know any reason not to use it. There was a 2007 article on A List Apartwhere they did some tests and found that font sizes displayed more reliably across browsers when the base font was declared at 100%and text was sized in em. But I'd be surprised if any of the browser constraints listed there are really relevant anymore. I still have a hard time feeling good about setting my base font size to 10px, but that's probably just personal preference.

这已经有一段时间了，现在我不知道有什么理由不使用它。2007 年在 A List Apart 上有一篇文章，他们做了一些测试，发现当基本字体声明为100%并且文本大小为em. 但是，如果列出的任何浏览器限制真的不再相关，我会感到惊讶。我仍然很难将我的基本字体大小设置为10px，但这可能只是个人喜好。

---

---

Update

更新

After doing some tests, I'm reversing my practice of using pixels for media queries. I'm now recommending em:

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

1. Users do change their base font size. One thread on the Mozilla support network, "How can I increase the browser default font size?"has over 5,000 views. And a similar threadhas over 15,000. Another studyfound a percentage of users (0.3%) who did have a default font size smaller or larger than 'medium'. How often users actually change it seems irrelevant (see a previous SO answer). If some people do, it's probably worth supporting them.

2. Ems are likely more future-proof. They will work for any device whose optimal default font size is not16px (as well as those that are).

3. The thing that convinced me the most was to see it in action. Here's a codepen demo.Notice that the browser's zoom probably makes no difference (I tested in Chrome). But if you actually go into your browser's settings and change the default font size from "medium" to something else, the widths are way off. In my opinion, this is unacceptable.

1. 用户确实更改了他们的基本字体大小。Mozilla 支持网络上的一个主题，“如何增加浏览器默认字体大小？” 有超过 5,000 次观看。而类似的线程有15000多个。另一项研究发现，有一部分用户 (0.3%) 的默认字体大小确实小于或大于“中等”。用户实际更改的频率似乎无关紧要（请参阅之前的 SO 答案）。如果有人这样做，那么支持他们可能是值得的。

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

3. 最让我信服的是亲眼所见。这是一个codepen演示。请注意，浏览器的缩放可能没有任何区别（我在 Chrome 中进行了测试）。但是，如果您真的进入浏览器的设置并将默认字体大小从“中等”更改为其他字体，那么宽度就会偏离。在我看来，这是不可接受的。

回答by nwalton

I haven't yet found any data specifically on users who change their base font size, but I did some checking into websites that have been designed by people who ought to know what they're doing. I was looking specifically at whether they used pxor emto specify their media queries. While this may not answer the question entirely, I think it adds some interesting dimension to the discussion.

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

Some Major Players

一些主要参与者

This list is by no means exhaustive or measured in any way except that it includes the names of individuals or groups off the top of my head who seem to be at the forefront of web development, or have contributed to responsive design practice in some way.

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

• Filament Group: em
• Luke Wroblewski: em
• Jeffrey Zeldman: px
• Chris Coyier: em
• Ethan Marcotte(a.k.a. The Father of Responsive Web Design): px
• Jason Santa Maria: px
• Mark Boulton: px
• Nicholas Gallagher: px

• 灯丝组: em
• Luke Wroblewski: em
• 杰弗里·泽德曼: px
• Chris Coyier: em
• Ethan Marcotte（又名响应式网页设计之父）：px
• 杰森圣玛丽亚: px
• 马克博尔顿：像素
• 尼古拉斯·加拉格尔: px

One interesting thing to note is that the last entry, Nicholas Gallagher, is the person who added the media query line to the HTML5 Boilerplate CSS. In that code he uses em, though on his personal site the media queries are set in px. I looked for discussion on that commit, but couldn't find any.

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

A Few of Their Sites

他们的一些网站

Again, a bit of a scattered list, but it contains a few sites that I consider worth looking at. Most of these have been built in full or in part by people from the previous list.

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

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

• 波士顿环球报（Filament Group，2011）：像素
• A List Apart: em
• 运球( Dan Cederholm): px
• HTML5 样板：em
• HTML5 移动样板：px

An interesting note with HTML5 Boilerplate, the main project's CSS uses emwhile the mobile version of the project uses px.

一个关于 HTML5 Boilerplate 的有趣说明，主要项目的 CSS 使用，em而项目的移动版本使用px.

Mega-Sites

大型网站

It was actually really surprising how few of the most popular sites on the webhave any media queries at all. Here are a few who do use media queries.

真正令人惊讶的是，网络上最流行的网站很少有任何媒体查询。以下是一些确实使用媒体查询的人。

• Microsoft: px
• Twitter: px
• Wordpress.com: em
• Adobe.com: px

• 微软：像素
• 推特：px
• Wordpress.com: em
• Adobe.com: px

Conclusion

结论

Inconclusive.

没有定论。

It looks like people are using both methods with success, and there doesn't seem to be agreement as to best practices.

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

I sort of get the feeling that some of the more progressive designers are moving to em, but I have no data for that other than it just "seems" like that might be the case. It could also be true that some of the sites listed above are older than others, and have not been updated since people started moving to em-based media queries. It's hard to really get enough data to draw a good conclusion on that front.

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

However, the fact that some of the biggest sites in the world are using pxtells me that this approach mustmight still be technically sound. If there were major problems with it, I'm sure the bigger sites would have heard about it from their users or from their testing, and moved to something more technically viable to serve their audiences.

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

回答by Netsurfer

There is one main reason why to use EM based media queries and that is
respect the users (base) font size setting
without breaking your layout!

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

You really should never ever neither define font-sizes in pixel (nor your elements width/height)!!!
Let the user decide what font-size he likes to look at your site.

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

So it is a question of accessibility.

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

If you are using pixel values, you have to assume a certain (base) font size, which is "normally" 16px. But not always, and that's the point. So if an user has chosen a smaller or larger (base) font size, your layout will fall apart.

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

Or on desktop systems, if the user uses the browser's zoom function he will get a horizontal scrollbar (which is mostly undesired).

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

All of this can be avoided by using relative units like EMs. And they have no drawbacks.

所有这些都可以通过使用诸如EMs. 他们没有缺点。

It is also worth mentioning that actually the base font size setting, as well as the zoom functionality in mobile browsers (on touch devices like tablets and samrtphones) work differently compared to their desktop counterparts. For the mobile browser versions the font size setting doesn't play such an important role as for desktop browsers. But again you do nothing wrong by using EMbased media queries. And imho this is as "future proofed" as possible.

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

And you can easily use the "62.5% technique" as well.
Be reminded that the new "root em" font size depends on the root element's (of the page) font size and that is the htmlelement, not the bodyelement.

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

Use the "62.5% technique" without breaking accessibility:

在不破坏可访问性的情况下使用“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+ */
}

So you can use remjust as if it where px(divided by 10),
but without doing any harm to the user's settings!

所以你可以rem就好像它在哪里px（除以 10）一样使用，
但不会对用户的设置造成任何损害！

No matter what base font size the user has chosen the font ratio will always stay intact.
And also your layout! ;-)

无论用户选择什么基本字体大小，字体比例都将始终保持不变。
还有你的布局！;-)

One final remark:
Always use min|max-widthmedia queries and never device-width! The reason in short is that you layout and setting your breakpoints depending on your content and never on resolutions of any devices!

最后一句话：
始终使用min|max-width媒体查询，永远不要device-width！简而言之，原因是您根据内容而不是任何设备的分辨率来布局和设置断点！

So by using relative units (like EMs) for your layout and font sizes your design is really "responsive". By using absolute units (like PX) it is not!

因此，通过EMs为您的布局和字体大小使用相对单位（如），您的设计确实是“响应式的”。通过使用绝对单位（如PX），它不是！