切换到基于Em的媒体查询 [英] Switching to Em-Based Media Queries
问题描述
现在，WebKit 页面缩放错误已经固定，使用基于电子的媒体查询而不是基于像素的媒体查询的主要原因是什么？
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 框架 和 网页 开发人员使用基于电子邮件的媒体查询，我相信这些查询必须有良好的理由。
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.
我知道的一个优点是，如果用户更改其浏览器中的默认字体大小，内容将挤压在这类似于页面缩放修复所解决的问题。是否有任何数据表明人们确实改变了默认尺寸而不是缩放？
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和media-based的媒体查询应该没有区别。
我实际上在一个项目中基于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 vs 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
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.
- 大部分非相对测量（仅取决于浏览器如何测量字体像素）
- 可缩放到所有现代浏览器
Ems非常适合制作灵活的网格和测量。例如，如果在ems中指定了容器宽度，我可以使用一个声明按比例调整我的媒体查询中的容器及其内容的大小。
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.
- 相对于容器字体大小
- 可缩放到所有现代浏览器
在此示例中，调整字体大小还会按比例调整其大小。
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.
根据浏览器的基本字体大小调整大小似乎是web标准的事情，因为那时你允许浏览器的最佳基本字体大小可能不是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级联
- 相对于基本字体大小
- 可缩放到所有现代浏览器
这已经存在了一段时间，现在我不知道任何理由不使用它。有一个关于A List Apart的 2007文章，他们做了一些测试，发现字体大小在基本字体被声明为 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可能更具有前瞻性。它们适用于最佳默认字体大小不是 16像素（以及那些）的任何设备。
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).
说服我最多的是看到它在行动。 这是一个代码演示。请注意，浏览器的缩放可能没有什么区别（我在铬）。但是，如果你实际上进入你的浏览器的设置，并将默认字体大小从中到其他，宽度是关闭。在我看来，这是不能接受的。
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屋！
