切换到基于Em的媒体查询
现在WebKit 页面缩放问题已经解决 ，使用基于em的媒体查询而不是基于像素的媒体查询的主要原因是什么？
赏金
我为我的问题添加了一个奖金，因为许多着名的CSS 框架 和 Web 开发人员使用基于em的媒体查询，我相信这样做是有充分的理由的。
我知道的一个好处是，如果用户在浏览器中更改默认字体大小，则内容将以类似于页面缩放修复解决的问题的方式挤压 。 是否有任何数据显示人们实际上是否改变默认大小而不是缩放？
注意
为了让我的问题更具针对性，我删除了两个外围设备。 原来的文章将增加透视@ nwalton的伟大的答案 ，这涉及到所有我问到的三点。
-
在现代浏览器中，如果浏览器正确处理缩放，则基于em和基于像素的媒体查询应该没有区别。
实际上，我在一个项目中遇到了基于em的媒体查询问题，因为在其中一个媒体查询中，基本字体大小发生了变化，然后所有其他媒体查询都被搞乱了。 这可能只是一个愚蠢的错误，但你明白了。 我会去像素。见下面的更新。 尽pipe缩放对现代浏览器没有影响，但基本字体大小仍然存在。 -
我看到你遇到的最大的问题是使用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; } -
如果浏览器处理
pxvsem速度有什么不同，那么它并不明显。 浏览器真的计算CSS，真的很快（比JS快得多）。 所以这可能不值得担心。
测量优点，缺点和用途
PX
过去我使用px来进行媒体查询，因为它们非常可靠，就像你说的，它们变得很好。 更新：但是，如果用户更改其默认样式表，您的媒体查询将closures。
- 独立于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
我实际上没有使用rem ，但我可以看到为什么很多人喜欢它。 你拥有一个相对单位的力量，但是你不必处理在CSS级联中可能发生的疯狂的事情。
基于浏览器基本字体大小的大小看起来像是networking标准的事情，因为那样你就可以使用最佳基本字体大小可能不是16px的浏览器。 但实际上，这种方式有其他作用。 从我所看到的，浏览器使用16px作为基本字体大小，因为这是所有人都期望的，并且将CSS测量的实际大小设置为在浏览器中看起来不错。
- 独立于CSS级联
- 相对于基本字体大小
- 在所有现代浏览器中都可以缩放
关于62.5％技术的说明
这已经有一段时间了，现在我不知道有什么理由不使用它。 在2007年的一篇文章中 ，他们做了一些testing，发现当基本字体被声明为100% ，文本大小为em时，跨浏览器的字体大小显示更加可靠。 但是，如果列出的任何浏览器限制条件真的有关，我会感到惊讶。 我仍然很难将基本字体大小设置为10px ，但这可能只是个人偏好。
更新
做了一些testing之后，我倒转了使用像素进行媒体查询的做法。 我现在推荐em ：
-
用户确实更改了其基本字体大小。 Mozilla支持networking上的一个线程“我如何增加浏览器的默认字体大小？” 有超过5000个意见。 而类似的线程已超过15000。 另一项研究发现，使用默认字体的用户比例（0.3％）小于或大于“中等”。 用户实际上多久改变一次似乎是不相干的（见前面的答案 ）。 如果有人这样做，可能值得支持他们。
-
Ems可能更具前瞻性。 他们将适用于任何设备的最佳默认字体大小不是 16px（以及那些）。
-
最让我信服的是看到它在行动。 这是一个codepen演示。 请注意，浏览器的缩放可能没有什么区别（我在Chrome中testing过）。 但是，如果你真的进入了浏览器的设置，并将默认的字体大小从“中等”改为其他字体，宽度就会消失。 在我看来，这是不可接受的。
我还没有find任何关于改变基本字体大小的用户数据，但我做了一些检查，这些网站是由那些应该知道他们在做什么的人devise的。 我正在专门查看他们是否使用px或em来指定他们的媒体查询。 虽然这可能不能完全回答这个问题，但我认为这增加了一些有趣的维度。
一些主要的球员
这份清单绝不是详尽的，也不是以任何方式衡量的，只是它包括了我的头顶上的个人或团体的名字，他们似乎处于networking发展的最前沿，或者以某种方式对响应式devise实践做出了贡献。
- 长丝组 ：
- Luke Wroblewski ：时间
- 杰弗里Zeldman ： px
- 克里斯·科伊尔 ：时间
- Ethan Marcotte （又名响应式网页devise之父 ）： px
- 贾森圣玛丽亚 ： px
- 马克Boulton ： px
- Nicholas Gallagher ： px
需要注意的一点是，最后一个条目Nicholas Gallagher是将媒体查询行添加到HTML5 Boilerplate CSS的人 。 在他的代码中，他使用em ，尽pipe在他的个人网站上媒体查询设置为px 。 我寻找那个提交的讨论，但找不到任何。
一些网站
再次，一个零星的名单，但它包含了一些我认为值得一看的网站。 其中大部分是由上一份清单中的人员全部或部分build成的。
- 波士顿环球报 （ Filament Group ，2011）： px
- 一个名单除了 ：
- 运球 （ Dan Cederholm ）： px
- HTML5样板 ： em
- HTML5移动锅炉板 ： px
HTML5 Boilerplate是一个有趣的注释，主项目的CSS使用em而项目的移动版本使用px 。
巨型网站
实际上，真正令人惊讶的是，networking上最受欢迎的网站中几乎没有任何媒体查询。 以下是一些使用媒体查询的人。
- 微软 ： px
- Twitter ： px
- WordPress.com ：时间
- Adobe.com：px
结论
尚无定论。
看起来人们正在使用这两种方法取得成功，似乎对最佳实践并不一致。
我有些感觉到一些更加进步的devise师正在转向em ，但是除了“似乎”可能是这样的情况以外，我没有任何数据。 上面列出的一些网站比其他网站更老，也可能是真的，并且自从人们开始转向基于em的媒体查询以来没有更新过。 真正得到足够的数据很难在这方面得出一个好的结论。
但是，世界上一些最大的网站使用px的事实告诉我这种方法 必须 可能仍然是技术上合理的。 如果出现重大问题，我相信较大的网站会从用户或testing中听到这些信息，并转移到技术上更可行的服务于观众。
为什么要使用基于EM的媒体查询有一个主要原因
尊重用户（基础）字体大小设置
不破坏你的布局！
你真的永远不应该定义字体大小的像素（也不是你的元素的宽度/高度）！
让用户决定他喜欢看什么字体大小的网站。
所以这是一个可访问性的问题。
如果使用的是像素值，则必须假定某个（基本）字体大小，即“正常”16px。 但并不总是，这就是要点。 所以，如果用户select了更小或更大（基本）的字体大小，您的布局将分崩离析。
或者在桌面系统上，如果用户使用浏览器的缩放function，他会得到一个水平滚动条（这是大多不希望的）。
所有这些都可以通过使用像EMs这样的相对单位来避免。 而且他们没有缺点。
另外值得一提的是，实际上基本的字体大小设置，以及移动浏览器中的缩放function（在平板电脑和平板电脑等触摸设备上）的工作方式与桌面设备不同。 对于手机浏览器版本，字体大小设置不起到桌面浏览器的重要作用。 但是，通过使用基于EM的媒体查询，你也不会做任何错误。 imho这是尽可能“未来的发展”。
而且你也可以很容易地使用“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），
但不会对用户的设置造成任何伤害！
无论用户select什么样的字体大小，字体比例都会保持不变。
而且你的布局！ 😉
最后一句话：
始终使用min|max-width媒体查询，绝不使用device-width ！ 简而言之，原因在于您根据自己的内容来布局和设置断点，决不会使用任何设备的分辨率！
因此，通过使用相对单位（如EMs ）来进行布局和字体大小，您的devise真的是“响应式”的。 通过使用绝对单位（如PX ）它不是！
