使用偏好的媒体查询构建用户自适应界面

1. 准备工作

如今，用户会在设备上指定许多偏好设置。他们希望操作系统和应用看起来和用起来都像自己的。用户自适应界面是指能够使用这些偏好来提升用户体验，让用户感觉更亲切，感觉是自己的界面。如果做得正确，用户可能永远不会知道用户体验正在适应或已经适应。

用户偏好设置

设备硬件选择是偏好设置，操作系统是选择，应用和操作系统颜色是偏好设置，应用和操作系统文档语言是偏好设置。用户的偏好设置似乎只会越来越多。网页无法访问所有内容，这是有充分理由的。

以下是 CSS 可以使用的一些用户偏好设置示例：

设备视口大小
设备屏幕方向（纵向 | 横向）
字号
线上 / 线下
网络质量
配色方案（浅色 | 深色）
界面动画（开启 | 简化）
输入质量（鼠标 | 触控 | 触控笔）
文档方向和书写模式（从左到右、从上到下等）
显示模式（全屏 | 独立 | 极简界面 | 浏览器）

以下是 CSS 即将推出的一些用户偏好设置示例：

精简数据 / 精简模式
颜色范围
对比度（低 | 高 | 降低）
颜色（强制将用户的颜色应用到网页中）
透明度（开启 | 降低）

媒体查询

CSS 和 Web 通过媒体查询实现自适应和响应式设计，媒体查询是一种声明性条件，如果该条件为 true，则包含一组样式。最常见的是对设备视口大小的条件：如果大小小于 800 像素，则此处提供了一些更适合这种情况的样式。

用户自适应

不自适应的界面是指用户访问时不会发生任何变化的界面，基本上是向所有人提供相同的体验，无法进行调整。用户自适应界面可以针对五位不同的用户提供五种不同的外观和样式。功能相同，但界面美观度更高，并且可调整界面的用户更容易使用。

前提条件

了解 HTML 和 CSS
了解开发者工具，例如 Google Chrome 开发者工具

构建内容

在此 Codelab 中，您将构建一个自适应用户表单，该表单可根据以下情况进行调整：

通过为表单控件和周围的界面元素提供浅色和深色配色方案，实现系统颜色方案偏好设置
通过提供多种类型的动画来满足系统运动偏好设置
小视口和大视口，可提供移动设备和桌面设备体验
各种输入类型，例如键盘、屏幕阅读器、触控和鼠标
任何语言和读写模式

学习内容

在此 Codelab 中，您将了解现代 Web 功能，这些功能可帮助您构建自适应用户表单。您将学习如何进行以下操作：

制作浅色主题和深色主题
构建动画效果出色的无障碍表单
布局自适应表单
使用相对单位和逻辑属性

此 Codelab 将重点介绍用户自适应界面。对于不相关的概念，我们仅会略作介绍，但是会提供相应代码块供您复制和粘贴。

所需条件

Google Chrome 89 及更高版本，或您偏好的浏览器

2. 进行设置

获取代码

您可以在 GitHub 代码库中找到所需的有关此项目的所有内容。首先，您需要获取相关代码，然后在您常用的开发环境中将其打开。或者，您也可以派生此 Codepen 并从那里开始操作。

替代方案：在本地工作

如果您想下载代码并在本地处理，则需要安装 Node.js 12 或更高版本，并设置好代码编辑器，以便随时开始处理。

使用 Git

访问 https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
将代码库克隆到文件夹。
请注意，默认分支为 beginning。

使用文件

将下载的 ZIP 文件解压到某个文件夹。

运行项目

使用在上述任一步骤中创建的项目目录，然后执行以下操作：

运行 npm install 以安装运行服务器所需的依赖项。
运行 npm start 以在端口 3000 上启动服务器。
打开新的浏览器标签页。
前往 http://localhost:3000。

HTML 简介

本课将介绍用于支持用户自适应互动性的 HTML 方面。本讲座专门侧重于 CSS。如果您是表单或网站构建新手，建议您查看所提供的 HTML。在可访问性和布局方面，HTML 元素的选择至关重要。

准备好开始后，您将把以下框架转变为动态自适应的用户体验。

3. 自适应互动

Git 分支：beginning

完成本部分后，您的设置表单将适应以下情况：

游戏手柄 + 键盘
鼠标 + 触控
屏幕阅读器或类似辅助技术

HTML 的属性

源代码中提供的 HTML 是一个很好的起点，因为其中已选择语义元素来帮助您对表单输入进行分组、排序和标记。

表单通常是企业的重要互动点，因此表单必须能够适应网络可提供的多种输入类型。例如，表单必须能在移动设备上通过触控操作使用。在本部分中，您需要在布局和样式之前确保自适应输入的可用性。

输入分组

HTML 中的 <fieldset> 元素用于将类似的输入和控件分组在一起。在您的表单中，您有两个组，一个用于音量，另一个用于通知。这对于用户体验非常重要，因为用户可以跳过整个部分。

对元素进行排序

元素的顺序按逻辑顺序提供。这对用户体验至关重要，因此游戏手柄、键盘或屏幕阅读器技术的视觉体验顺序应相同或相似。

键盘互动

Web 用户已经习惯使用 Tab 键在表单中移动，幸运的是，如果您提供预期的 HTML 元素，浏览器会处理此操作。使用 <button>、<input>、<h2> 和 <label> 等元素会自动成为键盘或屏幕阅读器的目的地。

上面的视频演示了如何使用 Tab 键和箭头键在界面中移动并进行更改。不过，蓝色轮廓紧紧围绕着输入元素，请添加以下样式，使此互动留出一些空间。

style.css

input {
  outline-offset: 5px;
}

可尝试的操作

查看 index.html 中使用的 HTML 元素。
在浏览器中点击演示页面。
按 tab 键和 shift+tab 键可在表单中移动元素焦点。
使用键盘更改滑块和复选框的值。
连接蓝牙游戏手柄控制器，并通过表单移动元素焦点。

鼠标互动

网络用户已经习惯于使用鼠标与表单互动。尝试使用鼠标填写表单。滑块和复选框可以正常使用，但您可以做得更好。这些复选框对于鼠标点击来说太小了。

了解如何通过两项用户体验功能将标签及其输入源关联起来。

第一个功能是提供可供互动的选项，与小方块相比，标签更容易成为鼠标的目标。

第二个功能是准确了解标签所对应的输入。目前，如果没有 CSS，很难确定哪个标签对应哪个复选框，除非您提供一些属性。

这种显式关联还可以改善屏幕阅读器的体验，下一部分将对此进行介绍。

未关联：没有连接元素的属性

<input type="checkbox">
<label>...</label>

关联：连接元素的属性

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

所提供的 HTML 已为所有输入和标签添加了属性。如果您不熟悉这些概念，不妨进一步了解。

可尝试的操作

将鼠标悬停在某个标签上，然后注意复选框突出显示。
使用 Chrome 开发者工具检查标签元素，直观了解可用于选中复选框的可点击表面区域。

辅助技术可以与此表单互动，只需添加几个 HTML 属性，即可让用户体验更顺畅。

对于在 Chrome 中使用屏幕阅读器浏览当前表单的用户，系统会在 <picture> 元素处不必要地停止（并非 Chrome 特有的问题）。使用屏幕阅读器的用户很可能是因为有视力障碍才使用屏幕阅读器，因此停留在图片上并无帮助。您可以使用属性向屏幕阅读器隐藏元素。

index.html

<picture aria-hidden="true">

现在，屏幕阅读器会跳过纯视觉元素。

滑块元素 input[type="range"] 具有特殊的 ARIA 属性：aria-labelledby="media-volume"。这为屏幕阅读器提供了特殊指令，以提升用户体验。

可尝试的操作

使用操作系统屏幕阅读器技术在表单中移动焦点。
下载并尝试使用表单上的某些屏幕阅读器软件。

4. 自适应布局

Git 分支： layouts

完成此部分后，设置页面将：

使用自定义属性和用户相对单位创建间距系统
编写 CSS 网格，实现灵活的自适应对齐和间距
使用逻辑属性来实现国际自适应布局
编写媒体查询，以在紧凑型布局和宽敞型布局之间进行调整

间距

实现美观布局的关键在于使用有限的边距选项。这有助于内容实现自然的对齐和和谐。

自定义属性

此研讨会基于一组七个自定义属性尺寸。

将以下内容放在 style.css 的顶部：

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

该命名方式与人们彼此之间用于描述空间的措辞非常接近。您还可以专门使用 rem 单位来实现可读的整数单位尺寸调整，这种调整可以适应并考虑用户偏好。

页面样式

接下来，您需要设置一些文档样式，移除元素的边距，并将字体设置为美观的无衬线字体。

将以下内容添加到 style.css 中：

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

您首次使用了间距自定义属性！这标志着您的太空之旅正式开始。

排版

此布局的字体为自适应。system-ui 关键字将使用用户操作系统确定的最佳界面字体。

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

h1、h2 和 h3 的样式是次要的样式。不过，small 元素需要额外的 line-height 来处理文字换行的情况。否则会过于拥挤。

逻辑属性

请注意，body 上的 padding 使用逻辑属性（block-start、block-end）来指定边。在 Codelab 的其余部分，我们将广泛使用逻辑属性。与 rem 单位一样，它们也会根据用户进行调整。此布局可以翻译成其他语言，并设置为用户在其母语中习惯的自然书写方向和文档方向。逻辑属性只需定义一次空间、方向或对齐方式，即可解锁对这些属性的支持。

网格和 flexbox 已经是流相关的，这意味着为一种语言编写的样式将根据上下文适当应用于其他语言。自适应方向性；内容相对于文档方向性流动。

借助逻辑属性，您只需编写较少的样式即可覆盖更多用户。

CSS 网格布局

grid CSS 属性是一种强大的布局工具，具有许多功能，可用于处理复杂的任务。您将构建几个简单的网格布局和一个复杂的布局。您还将从外到内，从宏观布局到微观布局进行设计。您的间距自定义属性将变得至关重要，不仅是内边距或边距值，还包括列大小、边框半径等。

以下是 Chrome 开发者工具一次性叠加显示每个 CSS 网格布局的屏幕截图：

通过将以下每种样式添加到 style.css 中来继续操作：

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

默认情况下，网格会将每个子元素都放在自己的行中，因此非常适合堆叠元素。此外，它还具有使用 gap 的额外优势。之前，您使用 * 选择器为所有元素设置了 margin: 0，这现在非常重要，因为您要使用 gap 来设置间距。Gap 不仅是管理容器中空间的一个位置，而且是其相对流动。

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

这是设计中最棘手的网格布局，但它体现了最令人兴奋的自适应方面：

max-width 为布局算法提供一个值，以便在决定布局大小上限时使用。
gap 正在使用自定义属性，并传递与 column-gap 不同的 row-gap。
align-items 设置为 flex-start，以免拉伸商品高度。
grid-template-columns 的语法有些复杂，但目标是简洁明了；将列宽保持在 35ch，且永远不低于 10ch，如果空间足够，则将内容放入列中，否则放入行中。

测试调整浏览器窗口大小。观看表单在小视口中折叠为行，但在有空间时流入新列，无需媒体查询即可实现自适应。这种不使用媒体查询的自适应样式策略对于组件或以内容为中心的布局特别有用。

<section>

section {
  display: grid;
  gap: var(--space-md);
}

每个部分都应是一个网格，其中各行之间有中等间距。

header {
  display: grid;
  gap: var(--space-xxs);
}

每个标题都应是一个网格，其中各行之间以及子元素之间留有极小的额外空间。

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

此布局负责创建卡片式外观并将输入分组在一起。在下一部分中添加颜色后，overflow: hidden 和 gap: 1px 会变得清晰。

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

此布局负责将图标和复选框及其关联的标签和控件居中放置。网格模板的第一列 var(--space-lg) 创建了一个比图标更宽的列，因此子元素可以在其中居中显示。

此布局演示了自定义属性中已做出的设计决策数量。边衬区、间距和列的大小都通过使用您已定义的值在系统和谐度内进行调整。

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

此布局负责设置、图标圆圈的大小、创建圆形以及将图片居中放置在其中。

<picture> & [复选框] 对齐方式

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

此布局使用 :is 伪选择器将居中隔离到图片和复选框元素。

将选择器 picture > svg 替换为 .fieldset-item svg，如下所示：

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

此属性将 SVG 图标大小设置为尺寸系统中的某个值。

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

此实用程序类用于复选框标签元素，以设置复选框的辅助文本的间距。

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

这些样式使用间距集中的值来增加复选框的大小。

可尝试的操作

打开 Chrome 开发者工具，然后在元素面板中找到 HTML 上的网格徽章。点击这些工具即可开启调试工具。
打开 Chrome 开发者工具，然后将鼠标悬停在样式窗格中的间隙上。
打开 Chrome 开发者工具，前往样式窗格，然后从样式切换到布局。通过切换此区域的设置并开启布局来探索此区域。

媒体查询

以下 CSS 会根据视口大小和方向调整样式，目的是根据视口上下文调整间距或排列方式，以达到最佳效果。

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

这两个媒体查询会在视口空间变大时提供 main 的额外内边距。这意味着，它最初采用紧凑的小内边距，但随着可用空间的增加，内边距会越来越大。

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

借助 auto-fit，表单已可根据视口大小做出响应，但在移动设备上进行测试时，将设备转为横屏模式并不会将两个表单组并排放置。使用 orientation 媒体查询和视口宽度检查来适应此横向情境。现在，如果设备处于横屏模式且宽度至少为 640 像素，请将 --repeat 自定义属性切换为数字，而不是 auto-fit 关键字，以强制显示两列。

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

此媒体查询是另一种间距扩展，可在有更多视口空间时使用。网格模板通过在模板中使用较大的自定义属性 (var(--space-xxl)) 来扩展第一列。内边距也会提升到更大的自定义属性。

可尝试的操作

展开和收缩浏览器，并观察空间如何调整。
在移动设备上预览
在移动设备上以横屏模式预览

5. 自适应颜色

Git 分支： colors

完成本部分后，您的设置表单将：

适应深色和浅色偏好
具有从品牌十六进制颜色值派生的配色方案
采用无障碍颜色

HSL

在下一部分中，您将使用 HSL 创建一个色彩系统，以帮助您制作浅色和深色主题。它基于 CSS 中的这个核心概念：calc()。

HSL 是指色调、饱和度和亮度。色调是一个角度，就像时钟上的一个点，而饱和度和亮度是百分比。calc() 能够对百分比和角度进行数学运算。您可以在 CSS 中对这些百分比执行明度和饱和度计算。将颜色通道计算与自定义属性相结合，您将获得现代化的动态配色方案，其中变体是根据基础颜色计算得出的，有助于您避免在代码中管理大量颜色。

自定义属性

在本部分中，您将构建一组自定义属性，以便在其余样式中使用。与您之前在 :root 标记中设置的间距类似，您将添加颜色。

假设应用的品牌颜色为 #0af。您的首要任务是将此十六进制颜色值转换为 HSL 颜色值：hsl(200 100% 50%)。此转换会显示品牌在 HSL 中的颜色通道，您可以使用 calc() 计算各种辅助品牌颜色。

本部分中的每个代码块都应添加到同一 :root 选择器中。

品牌频道

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

这三个 HSL 渠道已被提取并放置到各自的自定义属性中。

按原样使用所有这三个属性，并重新创建品牌颜色。

品牌

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

由于您的配色方案默认采用深色，因此最好对颜色进行去饱和处理，以便在深色界面上使用（否则这些颜色可能会让眼睛感到不适或无法访问）。如需降低品牌颜色的饱和度，您可以按原样使用色调和明度，但通过除法将饱和度减半：calc(var(--saturation) / 2)。现在，您的品牌颜色已正确应用到主题中，但已进行去饱和处理，可供使用。

文本

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

对于深色主题中的阅读文本，您可以使用品牌色调作为基础，但要在此基础上构建近乎白色的颜色。许多用户会认为文字是白色，但实际上是浅蓝色。保持色调一致是营造和谐设计效果的有效方法。--text1 为 85% 的白色，--text2 为 65% 的白色，两者饱和度都很低。

将代码添加到项目后，打开 Chrome 开发者工具，探索如何更改这些渠道值。感受 HSL 及其渠道如何相互作用。也许您喜欢更饱和或更不饱和的色彩。

Surface

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

由于深色模式下界面会变暗，因此文字会非常浅。如果文本颜色使用较高的亮度值（85% 及更高），界面将使用较低的值（30% 及更低）。确保 Surface 和文字之间的亮度范围有足够的差距，有助于确保用户能够轻松阅读。

请注意，颜色从最深的灰色开始，亮度为 10%，饱和度为 10%，然后随着颜色变浅而逐渐降低饱和度。每个新表面的亮度都比前一个低 5%。较浅表面的饱和度也略有下降。尝试将所有表面的饱和度都设置为 10%。您是更喜欢还是不太喜欢？

浅色主题

在指定深色主题的文本和界面颜色设置完善后，接下来需要通过更新 prefers-color-scheme 媒体查询中的颜色自定义属性来适应浅色主题偏好设置。

您将使用相同的技巧，即让 surface 和文字颜色之间的亮度值保持较大差异，以确保颜色对比度良好。

品牌

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

首先是品牌颜色。需要将饱和度恢复到最大程度。

文本

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

与深色主题中的浅蓝色文字颜色类似，浅色主题中的文字颜色为深蓝色。看到 HSL 颜色的明度值为 10% 和 30% 时，您应该知道这些颜色是深色。

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

这些界面颜色最先打破了模式。到目前为止，一切看起来都相当合理且呈线性，但现在却被打破了。好消息是，您可以在代码中直接尝试 HSL 浅色主题配色方案，并调整明度和饱和度，以创建不会过于冷或蓝的浅色配色方案。

使用颜色系统

现在，颜色已定义，接下来可以使用它们了。您拥有醒目的强调品牌颜色、两种文字颜色和四种表面颜色。

对于以下代码部分，找到匹配的选择器，并将颜色 CSS 添加到现有代码块。

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

网页主色是您设置的第一个表面颜色和文本颜色，这也会使默认对比度达到最大值。现在可以开始测试浅色和深色主题切换功能了！

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

这是设计中类似卡片的元素。1 像素边框和 1 像素间距的颜色相同，表示每个 .fieldset-item 后面的表面。这样可以营造出和谐的视觉效果，并且易于维护。

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

每个表单输入都位于自己的 surface 上。希望您能看出这些元素是如何组合在一起的，以及不同明度的颜色是如何分层叠加的。

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

这是一种样式选择，用于展示图标周围的圆形。在下一部分中添加互动后，您就会明白原因。

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

表单中的图标设置为使用替代文本 --text2。如果填充图标比文字略浅，设计就不会显得过于厚重。

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

当用户与输入容器元素中的某个输入进行互动时，此选择器会匹配该输入容器元素，并以品牌强调色为目标 SVG 添加突出显示效果。这样可以提供良好的表单用户体验反馈，即与输入互动会突出显示其相关图标。

<small>

small {
  color: var(--text2);
}

这是小号文字。与标题和段落（主要内容）相比，它应略微柔和。

深色表单控件

:root {
  color-scheme: dark light;
}

这一精妙的最后润色会告知浏览器相应网页同时支持深色主题和浅色主题。浏览器会为我们提供深色表单控件。

6. 自适应动画

Git 分支： animations

完成此部分后，设置页面将：

根据用户运动偏好进行调整
响应用户互动

减少动画效果与无动画效果

在操作系统中找到的运动用户偏好设置不提供“无动画”值。该选项用于减少动态效果。对于偏好减少动态效果的用户，淡入淡出动画、颜色过渡等效果仍然很有吸引力。

在此设置页面中，屏幕上的移动动作不多。这种运动更像是一种缩放效果，仿佛元素正朝着用户移动。调整 CSS 代码以适应减少的运动非常简单，您只需减少缩放过渡即可。

互动样式

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

当用户与某个 <fieldset> 卡片式元素进行互动时，系统会添加升起效果。界面将元素向前推，帮助用户在情境化表单组向用户靠近时集中注意力。

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

当用户与输入内容互动时，特定项图层背景会变为突出显示的表面颜色，这是另一项辅助界面功能，有助于吸引用户的注意力并表明系统正在接收输入内容。在大多数情况下，无需减少颜色过渡。

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

以下是 clip-path 动画，仅当用户在减少运动方面没有偏好设置时使用。第一个选择器和样式将圆形剪切路径缩小了 10%，并设置了一些过渡参数。第二个选择器和样式会等待用户与输入源互动，然后放大图标的圆圈。如果一切正常，则会产生一种细微但整洁的效果。

7. 恭喜

Git 分支： complete

恭喜，您已成功构建了一个自适应用户界面！

现在，您已了解让界面适应各种用户场景和设置所需的关键步骤。

使用偏好的媒体查询构建用户自适应界面 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

1. 准备工作

用户偏好设置

媒体查询

用户自适应

前提条件

构建内容

学习内容

所需条件

2. 进行设置

获取代码

推荐：使用 Codepen

替代方案：在本地工作

HTML 简介

3. 自适应互动

HTML 的属性

输入分组

对元素进行排序

键盘互动

style.css

可尝试的操作

鼠标互动

可尝试的操作

屏幕阅读器互动

index.html

可尝试的操作

4. 自适应布局

间距

自定义属性

style.css

页面样式

style.css

排版

逻辑属性

CSS 网格布局

<main>

<form>

<section>

<header>

<fieldset>

.fieldset-item

.fieldset-item <picture>

<picture> & [复选框] 对齐方式

.fieldset-item <svg>

.sm-stack

input[type="checkbox"]

可尝试的操作

媒体查询

<main>

<form>

.fieldset-item

可尝试的操作

5. 自适应颜色

HSL

自定义属性

品牌频道

品牌

文本

Surface

浅色主题

品牌

文本

Surface

使用颜色系统

<body>

<fieldset>

.fieldset-item

.fieldset-item > picture

.fieldset-item svg

.fieldset-item:focus-within svg

<small>

深色表单控件

6. 自适应动画

减少动画效果与无动画效果

互动样式

<fieldset>

.fieldset-item

.fieldset-item > picture

7. 恭喜

使用偏好的媒体查询构建用户自适应界面