移动端与桌面端交互样式必须解耦，关键是以 hover/pointer 媒体特性按设备能力而非屏幕尺寸分离逻辑，配合 prefers-reduced-motion 控制动效，优先级为设备能力＞视口尺寸＞用户偏好。
移动端与桌面端交互样式必须解耦，否则 hover、focus-visible、pointer-events 等行为会在小屏上误触发或失效——这不是“适配问题”，而是逻辑冲突。解耦的关键不是写两套样式，而是让交互逻辑只在匹配的输入设备类型上生效。
用 hover 媒体特性判断指针设备支持能力
CSS 的 hover 特性检测的是设备是否“能可靠地悬停”，而非单纯看屏幕尺寸。手机和平板（即使带触控笔）通常返回 hover: none，而笔记本/台式机返回 hover: hover。这是比 min-width 更本质的分离依据。
常见错误是只靠断点写 @media (min-width: 1024px) { button:hover { ... } }——这会让 iPad Pro（12.9″，min-width: 1024px）错误启用 hover 效果，但实际无法悬停。
正确做法：
- 默认不定义
:hover样式（移动端无意义） - 仅在
@media (hover: hover)下启用交互增强 - 搭配
pointer: fine可进一步确认高精度输入设备（如鼠标、触控笔）
示例：
@media (hover: hover) and (pointer: fine) {
.nav-link:hover {
background-color: #f0f0f0;
text-decoration: underline;
}
.dropdown-trigger:hover + .dropdown-menu {
display: block;
}
}
用 prefers-reduced-motion 隔离动画交互依赖
桌面端常依赖微交互动画（如 tooltip 淡入、菜单滑出），但这些在移动端不仅耗电，还可能干扰滚动体验。更关键的是：部分用户在系统级开启“减少运动”后，prefers-reduced-motion: reduce 会全局禁用动画，此时你的 JS 动画库或 CSS transition 若未响应，就会卡顿或跳变。
不要只靠媒体查询控制显示/隐藏，要同步控制动效开关：
-
@media (prefers-reduced-motion: reduce)下，把transition设为none，animation设为none - 避免在
:hover或:focus中叠加复杂动画，除非已包裹在(hover: hover)内 - JS 中也应监听
matchMedia('(prefers-reduced-motion: reduce)')来跳过动画逻辑
示例：
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
用 pointer 和 any-pointer 区分触控与非触控交互路径
pointer 描述主输入设备的精度（fine / coarse），any-pointer 描述设备是否“具备任意一种指针设备”。它们能帮你决定是否启用点击反馈、长按菜单、拖拽排序等行为。
典型误用：给所有 .btn 加 :active { transform: scale(0.95); }——在桌面端鼠标点击时没问题，但在触屏上会因 touchstart → touchend 延迟导致反馈滞后，且 iOS Safari 对 :active 有特殊触发规则。
建议策略：
- 触控优先场景（如移动 App 风格界面）：用
@media (pointer: coarse)启用大尺寸点击区域、禁用:hover、替换:active为touch-action: manipulation - 混合输入设备（如二合一平板）：用
@media (any-pointer: coarse)表示“至少有一种粗粒度输入方式”，此时避免依赖精确悬停 - 桌面端专属操作（如右键菜单、拖拽重排）：只在
@media (pointer: fine)下绑定事件监听器
真正难处理的不是“怎么写两套样式”，而是当一个设备同时满足 min-width: 1024px、hover: none、pointer: coarse（比如 Surface Pro 触屏模式）时，该信哪条规则——这时得靠特性检测优先级：设备能力（hover/pointer） > 视口尺寸（min-width） > 用户偏好（prefers-reduced-motion）。漏掉其中任一环，交互解耦就只是表面功夫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
