触控目标
Touch Target
别名:触控目标点击热区可点区域按钮太小点不到手指点得中的范围点按热区touch targettap target
这是什么
触控目标是手指能点中的可交互范围，不等于图标看起来多大。苹果 HIG 建议至少 44×44 CSS 像素，Material 建议 48dp；相邻目标之间还要留约 8px 间距，避免误触。视觉小图标可以用透明内边距或伪元素把热区撑大，而不用改变外观。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 任何需要手指或鼠标点击、拖动的可交互控件
- 图标按钮、关闭按钮、列表行等视觉尺寸偏小的元素
- 边缘或角落里的操作，容易和相邻目标一起点到
✕ 不适用场景
- 纯展示、不可点击的图标与装饰元素
- 桌面端密集数据表格内的单元格选择
- 把热区无节制扩大导致相邻目标重叠
常见形式
舒适大热区
Comfortable
热区 44×44 起，主操作最稳妥
图标加内边距
Padded icon
视觉 24px，靠透明 padding 撑到 44px
行内文字链
Inline text link
用行高与内边距扩热区，不改视觉
实现要点
min-height: 44pxmin-width: 44pxpadding: 10pxtouch-action: manipulationaspect-ratio: 1给可交互元素设 min-width / min-height: 44px（或 48px），并在容器上用 gap 保证目标间距，而不是靠 margin 互相挤。图标视觉保持 24px，用 padding: 10px 把热区补到 44px；不方便加 padding 时用 ::before { content: ''; position: absolute; inset: -10px; } 扩展热区。onmouseover 出现的内容不算触控目标。触摸端加 touch-action: manipulation 去掉 300ms 双击缩放延迟。
平台 API
min-heightmin-widthpaddingtouch-action代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| Apple HIG | 44×44 pt 苹果建议的最小可点尺寸 |
| Material Design | 48×48 dp Material 建议的最小触控目标 |
| WCAG 2.2 | Target Size (Minimum) — 24×24 WCAG 的合规底线，产品应做得更大 |
相关概念
断点是布局发生切换的视口宽度临界值：窄于此用一套排版，宽于此换另一套。断点应由内容决定——把窗口慢慢拉宽，哪里开始拥挤、哪里变难看，那里就是断点，而不是照搬 iPhone、iPad 的型号宽度。移动优先用 min-width 从小到大叠加，断点越少越容易维护。
基础相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件搭配使用锚在视口角落、悬浮于内容之上的圆形按钮，承载当前页面唯一的主操作（新建、撰写、扫码）。 用阴影和位置宣告「我在所有内容之上」，比行内主按钮更醒目，但一屏只应有一个。点击后可展开 为带标签的扩展形态，或扇出一组快捷动作。
组件搭配使用用可见轮廓标记当前键盘焦点位置，让用户知道下一个按键会落在哪里。鼠标点击往往不需要它，但键盘与辅助技术用户必须始终看见焦点在哪，否则只能盲操作。通常用 :focus-visible 控制——键盘聚焦才显示，鼠标点击不打扰。
无障碍搭配使用