can*_*era 62 css media-queries responsive-design
现在已经修复了WebKit 页面缩放错误,使用基于em的媒体查询而不是基于像素的媒体查询的主要原因是什么？
赏金
我正在为我的问题添加赏金,因为许多着名的CSS 框架 和 Web 开发人员都使用基于em的媒体查询,我相信必须有充分的理由这样做.
我所知道的一个优点是,如果用户在浏览器中更改默认字体大小,内容将以类似于页面缩放修复解决的问题的方式挤压.是否有任何数据显示人们确实更改了默认大小而不是缩放？
注意
为了使我的问题更集中,我删除了两个外围项目.在原来的职位将增加的角度来@ nwalton的伟大答案,其中涉及所有的三点我问.
nwa*_*ton 56
在现代浏览器中,如果浏览器正确处理缩放,则基于em和基于像素的媒体查询之间应该没有区别. 我实际上在一个项目中遇到基于em的媒体查询的问题,因为在其中一个媒体查询中,基本字体大小发生了变化,然后所有其他媒体查询都搞砸了.这可能只是一个愚蠢的错误,但你明白了.我会选择像素. 请参阅下面的更新 虽然缩放对现代浏览器没有影响,但基本字体大小仍然有效.
我看到你遇到的最大问题可能是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; }
如果浏览器处理速度px与速度有任何不同em,那就不明显了.浏览器真的非常快速地计算CSS(比JS快得多).所以它可能不值得担心.
我过去曾经用过px媒体查询,因为它们非常可靠,就像你说的那样,它们可以放大.更新:但是,如果用户更改其默认样式表,您的媒体查询将会关闭.
Ems非常适合制作灵活的网格和测量.例如,如果在ems中指定了容器宽度,我可以使用一个声明按比例调整容器及其内容在我的媒体查询中的大小.
在此示例中,调整字体大小也会按比例调整其容器大小.
h1.title {
font-size: 2em;
width: 20em;
background-color: #baff1e;
}
@media (min-width: 400px) {
h1 {
font-size: 2.5em
}
}
我实际上没用rem多少,但我可以看到为什么很多人都喜欢它.你有一个相对单位的力量,但你不必处理你投入CSS级联时可能发生的疯狂的事情.
根据浏览器的基本字体大小来调整大小看起来像是Web标准的事情,因为那时你允许浏览器的最佳基本字体大小可能不是16px.但在实践中,它的另一种方式是有效的.从我所看到的,浏览器使用16px基本字体大小,因为这是每个人都期望的,并将CSS测量的实际大小设置为在浏览器中看起来不错.
这已经有很长一段时间了,现在我不知道有什么理由不使用它.有一个在列表除了2007年的文章,他们做了一些测试,发现字体大小显示更可靠地跨浏览器的时候基本字体,在宣布100%和文字在大小em.但是,如果列出的任何浏览器约束确实相关,我会感到惊讶.我仍然很难将基本字体大小设置为10px,但这可能只是个人偏好.
在做了一些测试后,我正在改变我使用像素进行媒体查询的做法.我现在推荐em:
用户确实更改了基本字体大小.Mozilla支持网络上的一个主题是"如何增加浏览器默认字体大小？" 有超过5,000意见.而类似的线程有15000多个.另一项研究发现,一定比例的用户(0.3%)的默认字体大小小于或大于"中等".用户实际更改它的频率似乎无关紧要(参见之前的SO答案).如果有人这样做,可能值得支持他们.
Ems可能更适合未来发展.它们适用于最佳默认字体大小不是 16px的任何设备(以及那些).
最让我信服的是看它在行动中.这是一个codepen演示.请注意,浏览器的缩放可能没什么区别(我在Chrome中测试过).但是,如果您实际进入浏览器的设置并将默认字体大小从"中"更改为其他内容,则宽度会偏离.在我看来,这是不可接受的.
nwa*_*ton 31
我还没有找到任何关于改变基本字体大小的用户的数据,但我做了一些检查,这些网站是由那些应该知道他们正在做什么的人设计的.我一直在寻找他们是否使用px或em指定他们的媒体查询.虽然这可能不完全回答这个问题,但我认为它为讨论增加了一些有趣的方面.
这份清单绝不是详尽无遗的,也不是以任何方式衡量的,只不过它包含了我个人或团体的名字,他们似乎站在网站开发的最前沿,或者以某种方式为响应式设计实践做出了贡献.
值得注意的一件事是,最后一个条目Nicholas Gallagher是将媒体查询行添加到HTML5 Boilerplate CSS的人.在他使用的代码中em,尽管在他的个人网站上设置了媒体查询px.我寻找有关该提交的讨论,但找不到任何.
再次,一些分散的列表,但它包含一些我认为值得关注的网站.其中大部分都是由前一个清单中的人完全或部分建造的.
HTML5 Boilerplate的一个有趣的注释,主要项目的CSS使用,em而项目的移动版本使用px.
实际上,网上最受欢迎的网站几乎没有任何媒体查询真的令人惊讶.以下是一些使用媒体查询的人.
尚无定论.
看起来人们正在使用这两种方法取得成功,并且似乎没有就最佳实践达成一致.
我有种感觉,一些更先进的设计师正在转向em,但我没有其他数据,只是"似乎"似乎可能是这种情况.上面列出的某些网站也可能比其他网站更旧,并且由于人们开始转向使用基于em的媒体查询,因此尚未更新.很难真正获得足够的数据来在这方面得出一个好结论.
然而,世界上一些最大的网站正在使用的事实px告诉我这种方法必须可能仍然技术上合理.如果它存在重大问题,我相信大型网站会从用户或测试中听到它,并转向更具技术可行性的服务他们的观众.
Net*_*fer 21
使用基于EM的媒体查询有一个主要原因,即
在
不破坏布局的情况下尊重用户(基本)字体大小设置!
你真的永远不应该在像素中定义字体大小(也不要在元素宽度/高度上)!
让用户决定他喜欢看你网站的字体大小.
所以这是一个可访问性的问题.
如果使用像素值,则必须假定某个(基本)字体大小,即"正常"16px.但并非总是如此,这就是重点.因此,如果用户选择了更小或更大(基本)的字体大小,您的布局将会崩溃.
或者在桌面系统上,如果用户使用浏览器的缩放功能,他将获得一个水平滚动条(这是最不希望的).
所有这一切都可以通过使用相关单位来避免EMs.它们没有任何缺点.
值得一提的是,实际上基本字体大小设置以及移动浏览器(在平板电脑和手机等触摸设备上)的缩放功能与桌面版本相比有所不同.对于移动浏览器版本,字体大小设置不像桌面浏览器那样起重要作用.但是,再次使用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),
但不会对用户的设置造成任何伤害!
无论用户选择何种基本字体大小,字体比率始终保持不变.
还有你的布局!;-)
最后一句话:
永远使用min|max-width媒体查询,永远不要device-width!简而言之,原因是您根据内容布局和设置断点,而不是任何设备的分辨率!
因此,通过使用相对单位(如EMs)来布局和字体大小,您的设计真的是"响应".通过使用绝对单位(如PX),它不是!