CSS响应式设计需兼顾可访问性：媒体查询用em而非px以适配用户字体偏好；viewport必须含width=device-width、initial-scale=1、viewport-fit=cover，禁用user-scalable=no；隐藏内容应避免display:none，改用clip-path或绝对定位；flex/grid中order不改变DOM顺序，须保持视觉与结构一致。
CSS 响应式设计本身不保证可访问性，但错误的写法会直接破坏屏幕阅读器体验、键盘导航和缩放能力——关键在如何用媒体查询、相对单位和语义 HTML 配合。
media query 里用 px 还是 em？
用 em（或 rem）更稳妥。用户若在系统级放大字体（比如 Windows 的“放大文本”或 macOS 的“更大字体”），基于 px 的断点会失效：布局可能在不该断的时候断，或该断时卡死。em 是相对于当前字体大小的，能跟随用户偏好变化。
- 推荐写法：
@media (min-width: 40em)（≈640px @16px 默认字号） - 避免写法：
@media (min-width: 640px)—— 在高DPI屏或系统缩放下容易错判视口宽度 - 注意：
em在媒体查询中以根元素（html）字体大小为基准，不是父元素
viewport meta 标签漏掉 user-scalable=no 以外的属性
只写 <meta name="viewport" content="width=device-width"> 是不够的。缺少 initial-scale=1 会导致 iOS Safari 在横竖屏切换时重置缩放；没有 maximum-scale=1，用户双指缩放会被强制禁用——这违反 WCAG 1.4.4 缩放要求。
- 必须包含：
width=device-width、initial-scale=1、viewport-fit=cover（iOS 安全区域适配） - 禁止加：
user-scalable=no或maximum-scale=1—— 会锁死用户缩放，对低视力用户致命 - 副作用：某些安卓浏览器对
initial-scale=1解析不稳定，建议配合min-scale=1稍作兜底
用 display: none 隐藏内容却不考虑屏幕阅读器
display: none 和 visibility: hidden 会让元素彻底从辅助技术树中移除。如果只是想“视觉上隐藏”，比如跳转链接、筛选按钮的文本，得换方案。
立即学习“前端免费学习笔记（深入）”；
- 安全替代：
clip-path: inset(50%)或position: absolute; left: -9999px（需配top和width防布局塌陷） - 现代写法：
clip: rect(0 0 0 0)已废弃，别用；aria-hidden="true"只适用于**确实不需要被读出**的装饰性内容 - 典型翻车场景：响应式导航菜单收起后用
display: none，结果屏幕阅读器用户根本找不到菜单入口
flex/grid 布局中忽略 order 对阅读顺序的影响
CSS order 只改变视觉流，不改变 DOM 顺序和焦点顺序。键盘 Tab 导航仍按 HTML 结构走，而屏幕阅读器默认也按 DOM 顺序朗读。视觉上“把搜索框提到最前”，但 DOM 里它在页脚，用户 Tab 几十次才到——这就成了可访问性漏洞。
- 原则：视觉顺序和 DOM 顺序尽量一致；必须错位时，用
tabindex手动干预（慎用） - 检查方法：关掉 CSS，看纯 HTML 是否仍保持逻辑流（标题→导航→主内容→侧栏→页脚）
- 替代思路：用
grid-template-areas配合语义化结构，比靠order更可控
真正难的不是写出“看起来响应”的页面，而是确保每次媒体查询生效、每个隐藏/显示切换、每处焦点管理，都不悄悄切断某类用户的操作路径。可访问性不是加个 aria-label 就完事，它藏在你选 px 还是 em 的那一行里。
