一个月前,我 探讨了依赖交互式媒体特征 的重要性,以识别用户的悬停元素能力或检测其指向设备的准确性,是指精细指针,如鼠标,或粗糙指针,如手指。
但这不仅仅是输入设备或悬停能力;屏幕刷新率,屏幕颜色或方向。 根据视窗宽度对这些因素做出假设并不可靠,会导致界面故障。
我将带您踏上 媒体查询级别 4 的土地,探索 W3C CSS 工作组 制定的帮助我们处理所有设备水果沙拉狂热的机会。
媒体查询
简而言之,媒体查询向我们告知内容显示的上下文,从而使我们能够限定和优化样式。 也就是说,我们可以根据上下文以不同的方式显示相同的内容。
媒体查询级别 4 规范 回答了两个问题
- 设备视窗大小和分辨率是多少?
- 设备能够做什么?
我们可以使用媒体类型关键字 all
、print
、screen
或 speech
来检测显示文档的设备类型,或者您可以使用媒体特征获得更细粒度的控制。
媒体特征
每个媒体特征测试设备的单个特定功能。 共有五种类型
- 屏幕尺寸媒体特征 检测视窗大小和方向。
- 显示质量媒体特征 识别分辨率和更新速度。
- 颜色媒体特征 发现设备能够显示的颜色数量。
- 交互式媒体特征 发现设备是否能够悬停以及其输入设备的质量。
- 脚本媒体特征 识别是否支持脚本语言,例如 javascript。
我们可以单独使用这些功能,也可以使用关键字 and
或逗号(表示“或”)将它们组合在一起。 还可以使用关键字 not
对其进行否定。
例如
@media screen and ((min-width: 50em) and (orientation: landscape)), print and (not(color)) {
...
}
将样式限定为宽度小于或等于 50em
的横向方向屏幕,或单色打印输出。
理解某件事的最佳方法是实际操作。 让我们深入研究导航栏的极端情况,以测试这些概念。
不必要的复杂导航栏
Brad Frost 在“7 个高效媒体查询习惯”中给我们的最佳建议之一是不要过度。
我们使界面越复杂,就需要考虑更多才能妥善维护它们。 – Brad Frost
这正是我接下来要做的。 让我们过度!
请注意,以下演示仅作为理解每个媒体特征作用的示例而设计:如果您想使用它(并维护它),请自行承担风险(并 告诉我!)。
考虑到这一点,让我们从能力较低、尺寸较小的体验开始,也称为“移动设备,小尺寸,纵向,缓慢,隔行扫描,单色,粗糙,无悬停优先”方法。
HTML 结构
为了测试媒体查询功能,我从一个非常简单的结构开始。 一方面:一个包含品牌名称的 header
和一个包含无序列表的 nav
。 另一方面:一个包含占位符标题和文本的 main
区域。
查看 CodePen 上 Andres Galante (@andresgalante) 的 第一部分:移动设备,粗糙,纵向,缓慢,单色,无悬停优先。
为能力较低、尺寸较小的设备和视窗设置默认 CSS
正如我之前提到的,我们首先考虑能力较低、尺寸较小的设备。 即使我们还没有限定样式,但我还是在考虑这样一种体验:它
max-width: 45em
小视窗,宽度小于或等于 45emorientation: portrait
纵向视窗,高度大于宽度update: slow
输出设备无法足够快地呈现或显示更改,以至于无法感知为平滑动画。monochrome
所有单色设备pointer: coarse
主要输入机制的精度有限,如手指hover: none
指示主要指向系统无法悬停
让我们处理定位问题。 对于纵向、小尺寸、触摸屏设备,我想将菜单固定在视窗底部,这样用户就可以用拇指方便地访问菜单。
nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
由于我们以触摸屏设备为目标,因此增加触摸目标很重要。 在 包容性设计模式 中,Heydon Pickering 提到,触摸区域的最佳尺寸尚不清楚,不同的供应商推荐不同的尺寸。
Pickering 提到了 Anthony Thomas 关于 手指友好体验 的文章,以及 Patrick H Lauke 为 W3C 移动可访问性工作组对触摸/指针目标尺寸的研究 进行的研究,主要结论是,“…让每个链接的尺寸大于成人指尖的直径”。
因此,我将菜单项的高度增加到 4em
。 由于这没有被限定,因此它将应用于任何视窗大小,因此 iPad Pro 等大型触摸屏设备和小型智能手机都将具有舒适的触摸目标。
li a {
min-height: 4em;
}
为了提高 Kindle 等单色或速度较慢设备的可读性,我没有从链接中删除下划线或添加动画。 我稍后再做这些操作。
查看 CodePen 上 Andres Galante (@andresgalante) 的 第二部分:移动设备,粗糙,纵向,缓慢,单色,无悬停优先。

小尺寸横向视窗,纵向大尺寸显示器或鼠标指针
对于横向视窗 orientation: landscape
、垂直显示器或平板电脑等大尺寸纵向视窗 min-width: 45em
,或具有精细指针(如手写笔)的小尺寸纵向设备 pointer: fine
,用户将不再使用拇指在手持设备上操作; 因此,我取消了菜单的固定,并将菜单放在标题的右上角。
@media (orientation: landscape), (pointer: fine), (min-width: 45em) {
main {
padding-bottom: 1em;
padding-top: 1em;
}
h1, nav {
position: static;
}
}
由于菜单和品牌名称已经过 flex 布局,并已拉伸,因此它们将很好地适应自身。
对于具有精细指针(如鼠标或手写笔)的用户,我们希望减小点击目标,以便在主区域上获得更多空间。
@media (pointer: fine) {
h1, li a {
min-height: 2.5em;
}
}
查看 CodePen 上 Andres Galante (@andresgalante) 的 第三部分:移动设备,粗糙,纵向,缓慢,单色,无悬停优先。

大尺寸横向视窗的垂直导航
垂直导航非常适合大尺寸横向视窗 (orientation: landscape) and (min-width: 45em)
,如平板电脑或计算机显示器。 为了实现这一点,我将 flex 布局应用于容器。
@media (orientation: landscape) and (min-width: 45em) {
.container {
display: flex;
}
...
}
请注意,点击目标与视窗大小或导航样式无关。如果用户在一个带有垂直标签的大型触摸屏设备上,无论屏幕宽度大小,他们都会看到更大的目标。
查看 CodePen 上 Andres Galante 的作品 第 4 部分:移动、粗糙、纵向、缓慢、单色、非悬停优先 (@andresgalante)。

动画、装饰和边缘情况
动画是 增强交互 并帮助用户快速轻松地实现目标的绝佳方式。但是,某些设备无法生成流畅的动画,例如电子阅读器。这就是为什么我将动画限制在能够生成良好体验的设备上 (update: fast), (scan: progressive), (hover: hover)
。
@media (update: fast), (scan: progressive), (hover: hover) {
li a {
transition: all 0.3s ease-in-out;
}
}
我还将在彩色设备上删除文本修饰
@media (color) {
li a { text-decoration: none; }
}
删除下划线(通过 text-decoration
)是一个棘手的问题。我们的无障碍顾问 Marcy Sutton 说得很好
一些用户确实从链接下划线中受益,尤其是在正文文本中。但由于这些特定的链接是导航的一部分,具有独特的样式处理,因此链接颜色只需要与背景颜色有 足够的对比度,以供视力障碍或色盲用户使用。

我还将边框宽度增加到 2 像素,以避免在等距设备(如等离子电视)上出现“twitter”(真实的术语!)。
@media (scan: interlace) {
li a, li:first-child a {
border-width: 2px;
}
}
最后的结果如下
查看 CodePen 上 Andres Galante 的作品 第 5 部分:移动、粗糙、纵向、缓慢、单色、非悬停优先 (@andresgalante)。
测试一下
测试所有这些可能并不容易!此示例依赖于 flexbox,一些浏览器对其他现代 CSS 功能的支持有限。例如,Kindle 不会读取 @media
、@support
或 flexbox 属性。
我在这里添加了浮动回退
查看 CodePen 上 Andres Galante 的作品 第 6 部分:移动、粗糙、纵向、缓慢、单色、非悬停优先 (@andresgalante)。

您可以在不同的设备、横向或纵向模式下打开 完整页面示例 并进行测试!
我们现实中什么时候才能使用所有这些功能?
现在!也就是说,如果您愿意在不同的浏览器上提供不同的体验。
今天,Firefox 不支持交互式媒体查询。拥有精细指针机制(如鼠标)的 Firefox 用户将看到较大的点击区域,从而减少了主要区域的实际空间。
对 大多数这些功能 的浏览器支持已经可用,对 交互式媒体功能的支持也不错!我相信我们很快就会看到它 在各个平台上得到支持。
请务必尽可能多地进行测试,不要假设这些功能都能正常工作,尤其是在功能较弱或较旧的设备上。
还有更多!
我已经在示例中介绍了一些媒体功能,但还有一些其他功能没有介绍。例如, 分辨率媒体功能 描述了输出设备的分辨率。
我的目标是让您超越强大的 MacBook 或配备视网膜显示屏的 iPhone。网络远不止这些,而且无处不在。我们拥有创造最令人惊叹、灵活、包容和适应性强的体验的工具;让我们使用它们。
非常有用的文章,Andres,谢谢。我仍然认为自己是一名自学成才的初学者,我设法拼凑了一个个人网站和一个商业网站,这些网站可能看起来非常简单,但我没有使用模板或 CMS 就做到了。知道如何为移动设备设计至关重要,我知道我没有花足够的时间进行研究,更喜欢直接进行开发,但我将尽力跟进您在这里提出的观点,以改进我的网站 [在时间允许的情况下!]。干杯!
嘿,Jon,CSS 世界发展如此之快,我们都是自学成才的初学者 :)
如果我能以任何方式帮助您,请在 Twitter 上联系我。
谢谢,我刚开始学习网页设计,像这样的文章确实帮助我了解了需要考虑的方面。再次感谢。
很酷!我很高兴它对您有帮助:) 谢谢您阅读它
非常棒的文章!
我可以将这种样式复制到我的网站,然后进行自己的修改吗?(我刚开始学习设计和编程)
当然,请便 :)
不错的文章,Andres。我学到了一些关于不同设备导航的技巧。谢谢!