切换到基于 Em 的媒体查询 [英] Switching to Em-Based Media Queries
问题描述
现在 WebKit 页面缩放错误 已经修复，使用基于em的主要原因是什么媒体查询而不是基于像素的媒体查询?
Now that the WebKit page-zoom bug has been fixed, what are the main reasons for using em-based media queries rather than pixel-based media queries?
赏金
我正在为我的问题增加悬赏，因为有这么多著名的 CSS 框架 和 网络 开发人员 使用基于 em 的媒体查询，我确信这样做必须有充分的理由.
I'm adding a bounty to my question because so many prominent CSS frameworks and web developers use em-based media queries that I'm convinced there must be good reason(s) for doing so.
我知道的一个优点是，如果用户更改浏览器中的默认字体大小，内容将 挤压 的方式类似于 page-zoom 解决的问题修复.是否有任何数据表明人们确实更改了默认大小而不是缩放?
The one advantage I'm aware of is that if a user changes the default font size in their browser, content will squeeze in 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?
注意
为了让我的问题更集中，我删除了两个外围项目.原帖将为@nwalton 的精彩答案，解决了我所问的所有三点.
To make my question more focused, I removed two peripheral items. The original post will add perspective to @nwalton's great answer, which addressed all three points I asked about.
推荐答案
在现代浏览器中，如果浏览器正确处理缩放，则基于 em 和基于像素的媒体查询之间应该没有区别.
实际上，我在一个项目中遇到了基于 em 的媒体查询的问题，因为在其中一个媒体查询中，基本字体大小发生了变化，然后所有其他媒体查询都被搞砸了.这可能只是一个愚蠢的错误，但你明白了.我会选择像素.请参阅下面的更新.虽然缩放对现代浏览器没有影响，但基本字体大小仍然有影响.
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.
我认为使用 62.5% 技术和 rem 可能会遇到的最大问题是，如果您遇到不理解它的浏览器.如果您担心，您可以为功能较弱的浏览器添加回退，并为现代浏览器设置 rem.
The biggest problem I see you could run into with the 62.5% technique and rem is 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 rem for the modern ones.
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 快得多).所以这可能不值得担心.
If there's any difference in how fast browsers process px vs em, it's not noticeable. Browsers calculate CSS really, really fast (much faster than JS). So it's probably not worth worrying about.
<小时>
测量的优点、缺点和用途
像素
我过去曾将 px 用于媒体查询，因为它们非常可靠，而且就像您说的那样，缩放效果很好.更新:但是，如果用户更改了他们的默认样式表，您的媒体查询将会关闭.
Measurement pros, cons, and uses
px
I have used px for 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.
- 独立于 CSS 级联
- 主要是非相对测量(仅取决于浏览器如何测量字体像素)
- 可在所有现代浏览器中缩放
Ems 非常适合制作灵活的网格和测量.例如，如果在 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.
- 响应 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
我实际上并没有经常使用 rem，但我明白为什么很多人喜欢它.您已经获得了相对单位的力量，但是您不必处理在您加入 CSS 级联时可能发生的疯狂事情.
rem
I haven't actually used rem much, 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.
根据浏览器的基本字体大小调整大小似乎是网络标准要做的事情，因为这样您就可以允许最佳基本字体大小可能不是 16px 的浏览器.然而，在实践中，它有点相反.据我所知，浏览器使用 16px 作为基本字体大小，因为这是每个人的预期，并将 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 16px as 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.
- 独立于 CSS 级联
- 相对于基本字体大小
- 可在所有现代浏览器中缩放
这已经有一段时间了，现在我不知道有什么理由不使用它.有一篇 2007 年关于 A List Apart 的文章，他们做了一些测试，发现字体大小显示更可靠当基本字体在 100% 中声明并且文本在 em 中调整大小时.但是，如果那里列出的任何浏览器限制真的不再相关，我会感到惊讶.我仍然很难将我的基本字体大小设置为 10px，但这可能只是个人喜好.
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 Apart where 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.
在做了一些测试之后，我改变了使用像素进行媒体查询的做法.我现在推荐 em:
After doing some tests, I'm reversing my practice of using pixels for media queries. I'm now recommending em:
用户确实会更改其基本字体大小.Mozilla 支持网络上的一个帖子，如何增加浏览器的默认字体大小?" 有超过 5,000 次浏览.而一个类似的帖子有超过 15,000 个.另一项研究发现有一定比例的用户 (0.3%) 确实拥有默认字体尺寸小于或大于中等".用户实际更改的频率似乎无关紧要(参见 之前的 SO 答案).如果有人这样做，那么支持他们可能是值得的.
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 thread has over 15,000. Another study found 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.
Ems 可能更具前瞻性.它们适用于最佳默认字体大小不是 16px(以及那些)的任何设备.
Ems are likely more future-proof. They will work for any device whose optimal default font size is not 16px (as well as those that are).
最让我信服的是亲眼所见.这是一个 codepen 演示. 请注意，浏览器的缩放可能会使差异(我在 Chrome 中测试过).但是，如果您真的进入浏览器的设置并将默认字体大小从中等"更改为其他大小，则宽度会相差很远.在我看来，这是不可接受的.
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.
这篇关于切换到基于 Em 的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
