移动设备,小尺寸,纵向,缓慢,隔行扫描,单色,粗糙,无悬停,优先

Avatar of Andrés Galante
Andrés Galante 发布

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费信用额度!

一个月前,我 探讨了依赖交互式媒体特征 的重要性,以识别用户的悬停元素能力或检测其指向设备的准确性,是指精细指针,如鼠标,或粗糙指针,如手指。

但这不仅仅是输入设备或悬停能力;屏幕刷新率,屏幕颜色或方向。 根据视窗宽度对这些因素做出假设并不可靠,会导致界面故障。

我将带您踏上 媒体查询级别 4 的土地,探索 W3C CSS 工作组 制定的帮助我们处理所有设备水果沙拉狂热的机会。

媒体查询

简而言之,媒体查询向我们告知内容显示的上下文,从而使我们能够限定和优化样式。 也就是说,我们可以根据上下文以不同的方式显示相同的内容。

媒体查询级别 4 规范 回答了两个问题

  • 设备视窗大小和分辨率是多少?
  • 设备能够做什么?

我们可以使用媒体类型关键字 allprintscreenspeech 来检测显示文档的设备类型,或者您可以使用媒体特征获得更细粒度的控制。

媒体特征

每个媒体特征测试设备的单个特定功能。 共有五种类型

我们可以单独使用这些功能,也可以使用关键字 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 小视窗,宽度小于或等于 45em
  • orientation: 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 说得很好

一些用户确实从链接下划线中受益,尤其是在正文文本中。但由于这些特定的链接是导航的一部分,具有独特的样式处理,因此链接颜色只需要与背景颜色有 足够的对比度,以供视力障碍或色盲用户使用。

我们确保颜色有足够的 颜色对比度 以通过 WCAG AAA。

我还将边框宽度增加到 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。网络远不止这些,而且无处不在。我们拥有创造最令人惊叹、灵活、包容和适应性强的体验的工具;让我们使用它们。