响应式断点应按交互方式而非像素设定：用@media (hover: hover) and (pointer: fine)显示Tab，@media not all or (hover: none) or (pointer: coarse)强制手风琴；details+summary实现无JS手风琴更语义化；键盘导航需预设ARIA属性；prefers-reduced-motion下禁用transition并用visibility替代opacity确保降级稳定。
响应式断点怎么设才不翻车
用纯CSS做Tab转手风琴，核心不是写多少样式，而是断点（@media）选在哪。常见错误是直接套用 Bootstrap 的 768px 或 992px，结果在 iPad Pro 横屏（1024px）下还显示 Tab，竖屏却切成了手风琴——它明明是同一台设备。
更稳妥的做法是按交互方式切换：触屏优先的设备，哪怕宽度 > 900px，也该用手风琴；桌面鼠标操作才适合 Tab 样式。所以推荐两个断点：
-
@media (hover: hover) and (pointer: fine)：能悬停 + 精准指针 → 显示 Tab -
@media not all or (hover: none) or (pointer: coarse)：无悬停或粗粒度指针（手机/平板触控）→ 强制手风琴
这样比像素断点更贴近真实用户行为，也避开 iOS Safari 对 max-width 的误判问题。
用 details + summary 实现无 JS 手风琴
别手写 display: none/block 切换 + transition 动画——既难控制高度过渡，又没法语义化。原生 details 元素才是纯 CSS 响应式手风琴的最优解。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
details[open]是唯一需要监听的状态，CSS 可直接捕获 -
summary::marker可自定义箭头，但 Safari 旧版不支持伪元素，需用background替代 - 想让展开内容有高度过渡？只能靠
max-height+overflow: hidden模拟，且值必须预估（比如max-height: 500px），否则动画失效
示例结构：
<details> <summary>标题</summary> <div class="accordion-content">内容…</div> </details>
Tab 样式下如何让焦点键盘导航可用
很多人只顾视觉切换，忘了键盘用户：Tab 键按顺序聚焦时，如果用 div 模拟 tablist，不加 role="tablist"、tabindex 和 aria-controls，屏幕阅读器就完全无法识别。
但纯 CSS 方案里，不能依赖 JS 绑定 ARIA 属性。解法是提前写死语义化 HTML 结构：
- 用
role="tablist"包裹所有button[role="tab"] - 每个
button必须有id和aria-controls="对应面板ID" - 对应面板用
role="tabpanel"+aria-labelledby="对应tabID"
这样即使没 JS，键盘 Tab 键也能正确跳转，且 CSS 通过 [role="tab"][aria-selected="true"] + [role="tabpanel"] 控制显隐即可。
prefers-reduced-motion 怎么平滑降级动画
强制加 transition: all 0.3s 很危险：开启系统“减少运动”偏好时，Safari 和 Firefox 会直接禁用所有 transition 和 animation，导致手风琴啪一下弹开，毫无缓冲。
正确做法是包裹媒体查询：
@media (prefers-reduced-motion: reduce) {
.accordion-content {
transition: none;
animation: none;
}
}
同时注意：不要对 height 做过渡（它无法从 auto 过渡），坚持用 max-height + 够大的固定值，再配合 overflow: hidden，才能在降级后仍保持内容不溢出。
真正麻烦的是 Tab 切换时的淡入淡出——如果用 opacity，降级后会直接闪现；换成 visibility: hidden/visible + z-index 控制层叠，反而更稳。
