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

1. 准备工作

211ff61d01be58e

最近，用户在自己的设备上指定了许多偏好设置。他们希望操作系统和应用的外观符合自己的需求。用户自适应界面即是随时利用这些偏好设置来改善用户体验，让用户感觉更自在的使用体验，更符合用户的使用体验。如果操作正确，用户可能永远不会知道用户体验正在调整或已经调整。

用户偏好设置

设备硬件选择是偏好设置，操作系统是选择，应用和操作系统颜色是偏好设置，应用和操作系统文档语言是偏好设置。用户的偏好程度似乎只增加了。网页不能出于合理原因访问所有内容。

下面列举了一些示例来说明 CSS 可以使用的用户偏好设置：

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

媒体查询

CSS 和网页可以通过媒体查询实现自适应和响应，媒体查询是包含一组样式的声明性条件（如果该条件为 true）。最常见的情况是设备视口大小方面的条件：如果尺寸小于 800 像素，则以下是一些适合该情况的更好样式。

用户自适应

非自适应界面是指当用户访问时不会发生任何变化的界面，实质上是为所有人提供一种体验，但无法调整。用户自适应界面可以有五种不同的外观和样式，适合五种不同的用户。功能相同，但玩家感觉其美观性更好，并且对于可以调整界面的用户来说，界面的易用性更轻松。

前提条件

构建内容

在此 Codelab 中，您将构建一个可适应以下内容的用户自适应表单：

  • 系统颜色方案偏好设置，通过为表单控件和周围的界面元素提供浅色和深色配色方案
  • 系统动作偏好设置（通过提供多种类型的动画）
  • 用于提供移动设备和桌面设备体验的小型和大型设备视口
  • 各种输入类型，例如键盘、屏幕阅读器、触摸和鼠标
  • 不限语言和阅读/写入模式

de5d580a5b8d3c3d.png

学习内容

在此 Codelab 中，您将了解现代 Web 功能，以帮助您构建用户自适应表单。你将学习如何

  • 创建浅色主题和深色主题
  • 构建可访问的动画表单
  • 布局自适应表单
  • 使用相对单位和逻辑属性

f142984770700a43.png

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

所需条件

  • Google Chrome 89 及更高版本，或您的首选浏览器

19e9b707348ace4c.png

2. 进行设置

获取代码

您可以在 GitHub 代码库中找到此项目所需的一切。首先，您需要获取代码，然后在您喜爱的开发者环境中将其打开。或者，您也可以复刻此 Codepen 分支，然后开始构建。

推荐：使用 Codepen

  1. 打开新的浏览器标签页。
  2. 访问 https://codepen.io/argyleink/pen/abBMeeq。
  3. 如果您没有账号，请创建一个账号以保存工作。
  4. 点击创建分支 (Fork)。

替代方案：在本地办公

如果您想下载代码并在本地运行，则需要安装 Node.js 12 或更高版本，并设置了代码编辑器并随时开始使用。

使用 Git

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

使用文件

  1. 将下载的 ZIP 文件解压缩到一个文件夹中。

运行项目

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

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

关于 HTML

本课将介绍支持用户自适应互动的 HTML 的各个方面。本次研讨会特别关注了 CSS。如果您是第一次构建表单或网站，建议您查看所提供的 HTML。说到无障碍功能和布局，HTML 元素的选择至关重要。

当您准备好开始使用时，这里就是您要转变为动态自适应用户体验的主干。

de5d580a5b8d3c3d.png

3. 自适应互动

Git 分支：beginning

完成此部分后，您的设置表单将调整为：

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

HTML 的属性

源代码中提供的 HTML 是一个很好的起点，因为已经选择了用于对表单输入进行分组、排序和添加标签的语义元素。

表单通常是企业的关键互动点，因此表单必须能够适应网络可以促成的多种输入类型。例如，可能需要提供便于用户在移动设备上触摸的表单。在本部分中，在执行布局和样式之前，您要确保自适应输入易用性。

对输入进行分组

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

为元素排序

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

键盘互动

网络用户已经习惯于使用 Tab 键在表单间导航，幸运的是，如果您提供预期的 HTML 元素，浏览器会负责处理。使用 <button>、<input>、<h2> 和 <label> 等元素会自动成为键盘或屏幕阅读器的目的地。

9fc2218473eee194.gif

上面的视频演示了如何使用 Tab 键和箭头在界面中移动并进行更改。虽然输入元素周围的蓝色轮廓非常紧张，但添加以下样式可让此互动有一点留白。

style.css

input {
  outline-offset: 5px;
}

可以尝试的操作

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

鼠标互动

网络用户已习惯使用鼠标与表单进行交互。尝试在表单上使用鼠标。滑块和复选框也适用，但您可以做得更好。这些复选框非常小，用鼠标点击即可。

ab51d0c0ee0d6898.gif

了解您将如何获得两个用户体验功能来关联标签及其输入？

第一个功能是提供互动选项，标签比小正方形更容易被鼠标定位。

第二个特征是确切了解标签对应哪个输入。目前没有 CSS，除非您提供一些属性，否则很难确定哪个标签对应哪个复选框。

这种显式连接还可以改善屏幕阅读器的体验，我们将在下一部分进行介绍。

未关联：没有将元素连接在一起的属性

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

Associated：连接元素的属性

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

所提供的 HTML 已为所有输入内容和标签注明出处。如果这对您来说是一个新概念，值得进一步研究。

可以尝试的操作

  1. 将鼠标悬停在某个标签上，您会注意到复选框会突出显示。
  2. 使用 Chrome 开发者工具研究标签元素，以直观显示可用于选择复选框的可点击 surface 区域。

屏幕阅读器互动

辅助技术可以与此表单互动，并且可以通过一些 HTML 属性使用户体验更流畅。

28c4a14b892c62d0.gif

如果用户在 Chrome 中使用屏幕阅读器浏览当前表单，系统会在 <picture> 元素上添加不必要的停顿（并非特定于 Chrome）。使用屏幕阅读器的用户很可能是因视力障碍而使用屏幕阅读器，因此停在图片上不会有任何帮助。您可以使用属性向屏幕阅读器隐藏元素。

index.html

<picture aria-hidden="true">

现在，屏幕阅读器会传递纯粹的视觉元素。

f269a73db943e48e.gif

滑块元素 input[type="range"] 具有一个特殊的 ARIA 属性：aria-labelledby="media-volume"。这为屏幕阅读器提供了特殊说明来改善用户体验。

可以尝试的操作

  1. 使用操作系统屏幕阅读器技术在表单中移动焦点。
  2. 在该表单上下载并试用一些屏幕阅读器软件。

4. 自适应布局

Git 分支 ：layouts

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

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

f142984770700a43.png

间距

好的布局的关键在于有限的间距选项面板。这有助于内容找到自然的一致性和和谐性。

自定义属性

本次研讨会将以七种自定义媒体资源大小为基础进行构建。

  • 请将以下代码放在 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 单位专门用于清晰可辨的整个广告单元尺寸，以便进行调整并考虑用户的偏好。

页面样式

接下来，您需要设置一些文档样式，移除元素的外边距，并将字体设置为合适的 sans-serif。

  • 将以下内容添加到 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 单元一样，会根据用户进行调整。这种布局可以翻译成其他语言，并根据用户的母语已经习惯的自然书写和文档方向进行设置。逻辑属性通过仅定义空间、方向或对齐方式来支持此操作。

ce5190e22d97156e.png

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

逻辑属性可让您以更少的样式覆盖更多用户。

CSS 网格布局

grid CSS 属性是一款功能强大的布局工具，具有许多用于处理复杂任务的功能。您将构建一些简单的网格布局和一个复杂的布局。此外，您还需要从外到内完成从宏观布局到微观布局的各种工作。您的间距自定义属性不仅关乎内边距或外边距值，还关乎列大小、边框半径等。

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

84e57c54d0633793

  1. 然后将以下每种样式添加到 style.css 中：

<main>

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

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

&lt;form&gt;

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 使用的是自定义属性，并且传递的 row-gap 与 column-gap 不同。
  • align-items 设置为 flex-start，以免拉伸项目高度。
  • grid-template-columns 具有一些复杂的语法，但目标是简洁的：让列宽 35ch 且始终不小于 10ch；如果有足够的空间，则将内容放入列中，否则就适合行。
  1. 测试调整浏览器大小。在较小视口中，表单收起为行时观察，但如果有足够的空间，则它会在新列中流动，在没有媒体查询的情况下进行调整。这种无需任何媒体查询的自适应样式策略对于组件或以内容为中心的布局来说尤其有用。

<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 <图片>

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

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

<图片>和[checkbox] 对齐方式

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

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

  1. 将选择器 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=&quot;checkbox&quot;]

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

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

可以尝试的操作

  1. 打开 Chrome 开发者工具，然后在Elements面板中的 HTML 上找到 Grid 标志。点击它们即可启用调试工具。
  2. 打开 Chrome 开发者工具，然后将鼠标悬停在 Styles（样式）窗格中的空白处。
  3. 打开 Chrome 开发者工具，转到样式窗格，然后从样式切换到布局。您可以切换设置并启用布局，探索此区域。

媒体查询

以下 CSS 会根据视口大小和方向调整样式，目的是在给定视口上下文的情况下调整间距或排列，以使其达到最佳状态。

<main>

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

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

随着视口空间的扩大，这两种媒体查询会为 main 提供更多的内边距。这意味着它从紧凑的少量内边距开始，但现在随着可用空间的增加，其空间会越来越大。

&lt;form&gt;

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)) 来展开第一列。内边距也会被提升至更大的自定义属性。

可以尝试的操作

  1. 展开和收缩您的浏览器，并观察空间调整。
  2. 在移动设备上预览
  3. 在移动设备上横向预览

5. 自适应颜色

Git 分支 ：colors

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

  • 根据深色和浅色偏好设置调整
  • 配色方案采用品牌十六进制形式
  • 使用易于使用的颜色

19e9b707348ace4c.png

HSL

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

HSL 代表色相、饱和度和亮度。色调是一个角度，就像时钟上的点，而饱和度和亮度则是百分比。calc() 能够对百分比和角度进行数学运算。您可以在 CSS 中针对这些百分比执行亮度和饱和度计算。将颜色通道计算与自定义属性相结合，即可采用现代动态配色方案（根据基本颜色计算变体），帮助您避免在代码中管理少量颜色。

5300e908c0c33d7

自定义属性

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

假设应用的品牌颜色为 #0af。您的第一项任务是将此十六进制颜色值转换为 HSL 颜色值：hsl(200 100% 50%)。通过这种转换，您可以了解品牌在 HSL 中的颜色通道，您可以在 HSL 上使用 calc() 计算各种辅助性品牌颜色。

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

品牌频道

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

这三个 HSL 通道已被提取，并置于它们自己的自定义属性中。

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

品牌

: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% 的白色，两者的饱和度都非常低。

  1. 将代码添加到您的项目后，打开 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% 及更高），则 Surface 将使用较低的值（30% 及更低）。Surface 和文本之间的亮度范围之间保持健康的跨度，将有助于确保用户能够轻松阅读色彩。

  1. 请注意，颜色从最深灰色开始，亮度为 10%，饱和度为 10%，然后随着颜色变浅，饱和度逐渐降低。每个新表面比上一个表面轻 5%。浅色表面的饱和度会略微降低。请尝试将表面的饱和度设为 10%。你是喜欢还是差一点？

浅色主题

有了一组健康的文本和 Surface 颜色来指定深色主题后，您便可以通过更新 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%
    );
  }
}

与深色主题的文字颜色非常浅一样，在浅色主题中，文字颜色为深蓝色。看到 10% 和 30% 作为 HSL 颜色的亮度值，您应该能够判断出这些颜色是深色的。

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%);
  }
}

这些 Surface 颜色是最先破坏图案的。到目前为止，看起来非常合理且线性的东西现在已经被破坏了。好消息是，您可以在这里直接在代码中使用 HSL 浅色主题颜色组合，并调整亮度和饱和度，创建不冷或太蓝的漂亮光线配色方案。

使用颜色系统

现在，您已经定义了颜色，是时候使用它们了。你有很棒的弹出品牌强调色、两种文本颜色和四种表面色。

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

<body>

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

页面主色是您设置的第一个界面颜色和文本颜色，这也会将默认对比度设置为最大值。可以开始测试浅色和深色切换了！

&lt;fieldset&gt;

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

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

.fieldset-item

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

每个表单输入都位于各自的 surface 上。希望您了解这些是如何结合的，以及亮度的变化是如何叠加在一起的。

.fieldset-item >相片

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

这是一种样式选择，用于展示环绕图标的圆形。在下一部分中添加互动时，就会明白为什么会这样。

.fieldset-item svg

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

表单中的图标设置为使用替代文本 --text2。在设计中，实心图标比文本略浅，会让图标不会显得太重。

.fieldset-item:focus-enabled svg

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

此选择器会在与内部某个输入源交互时匹配输入容器元素，并定位 SVG，以通过品牌强调方式突出显示该元素。这为表单提供了很好的用户体验反馈，其中与输入交互会突出显示其相关图标。

&lt;small&gt;

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

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

深色表单控件

:root {
  color-scheme: dark light;
}

最后一点，很不错，可以告知浏览器此页面同时支持深色主题和浅色主题。浏览器为我们提供了暗色表单控件。

6. 自适应动画

Git 分支 ：animations

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

  • 根据用户的动作偏好设置调整
  • 响应用户互动

b23792cdf4cc20d2.gif

减少动态与静止

在操作系统中发现的用户偏好设置不会提供“无动画”的值。您可以选择减少移动。对于更喜欢减少动作的用户来说，淡入淡出动画、颜色转换等功能仍然可取。

在此设置页面中，在屏幕上的移动操作不太多。该动作更像是一种缩放效果，就好像元素正在朝着用户移动一样。调整 CSS 代码以适应减少的动作，从而减少缩放转换，那么就非常简单。

互动样式

&lt;fieldset&gt;

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);
}

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

.fieldset-item >相片

@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

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

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