触摸与交互适配

响应式交互不只是把按钮变大。触摸、鼠标、触控笔的精度和悬停能力不同，用户还可能使用键盘、屏幕阅读器、放大或减少动态。交互目标需要有足够点击区域、清晰焦点和不依赖单一指针的反馈。

.action {
  min-block-size: 2.75rem;
  padding-inline: 1rem;
}
.action:focus-visible { outline: 3px solid Highlight; }
@media (hover: hover) and (pointer: fine) {
  .action:hover { background: #eee; }
}

hover 只应增强可用反馈，不能成为唯一入口。pointer 媒体特征提供输入精度线索，但不能推断用户只有一种输入设备；混合设备上要保留键盘和触摸路径。点击区域、间距、焦点样式和动画偏好要一起检查。

实验与练习

用键盘、鼠标和触摸模拟测试同一按钮，记录悬停、焦点、按下和禁用状态。将按钮缩小到难以点击的尺寸，再用最小尺寸和间距修复；打开减少动态偏好，确认反馈仍然可理解。

可运行微实验：主题闭环

用键盘、鼠标和触摸模拟器操作同一按钮，记录 hover、focus-visible、pointerdown 和 disabled 状态；切换 (hover: none) 与减少动态偏好，确认重要信息仍有非 hover 入口。

常见错误

• 只用 hover 显示重要信息。
• 隐藏焦点轮廓，却没有可见替代方案。
• 把设备类型当成用户唯一输入方式。
• 让相邻触摸目标过于拥挤，导致误触。

本章回顾

现在可以从视口和媒体查询、移动优先、流式单位与布局，一路解释到图片、排版和触摸交互的适配。下一章进入动画与过渡，继续区分视觉效果、性能和用户偏好。

进入第五章：动画与过渡

练习

1. 用最小输入复现“触摸与交互适配”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案