响应式与可访问交互

学习目标

这一课在布局之上补两件事：让页面在手机宽度下依然可用（响应式），让键盘和读屏用户也能顺畅操作（可访问性，Accessibility，常缩写 a11y）。读完你应该会设断点、会验证焦点显示、会给纯图标按钮补上名称，并能修掉窄屏横向滚动。

问题场景

你把课程页发给同学，他用手机打开：导航挤成一条细线点不中，整个页面能左右晃，用 Tab 键走的时候根本看不出焦点在哪。桌面上一切正常的东西，换个环境全是问题。响应式和可访问性不是加分项，而是「换个使用方式就坏」的 bug。

核心解释

响应式的核心工具是媒体查询（media query，按窗口宽度等条件切换样式的语法）。断点不要追着设备型号设，而是「内容开始难看了才加断点」：

nav ul { display: flex; gap: 12px; list-style: none; }

@media (max-width: 600px) {
  nav ul { flex-direction: column; } /* 窄屏改竖排 */
}

可访问性先做三件最基本的事：

1. 焦点可见：键盘用户靠 Tab 移动焦点，绝不能写 outline: none 而不补替代。用 :focus-visible（只在键盘操作时显示的焦点样式）精准控制：

button:focus-visible,
a:focus-visible {
  outline: 3px solid #4a6fa5;
  outline-offset: 2px;
}

2. 图标要有名称：只有「☰」的按钮对读屏用户是空白的，补上 aria-label（给控件的可访问名称属性）：<button aria-label="打开菜单">☰</button>。
3. 消灭页面级横向滚动：窄屏能左右晃，基本是某个固定宽度元素或不可断行的长内容超出了视口（viewport，浏览器可视区域）。

示例拆解

排查横向滚动的标准动作——在控制台找出比视口宽的元素：

document.querySelectorAll('*').forEach((el) => {
  if (el.scrollWidth > document.documentElement.clientWidth) {
    console.log(el, el.scrollWidth);
  }
});

• 输出里 scrollWidth 最大的元素通常就是元凶：可能是 width: 800px 的图片容器，也可能是一串没有空格的字符。
• 修法两板斧：容器加 overflow-x: auto（让内容在容器内部横向滚动，而不是撑破页面），内容侧用上一课的 min-width: 0 加 overflow-wrap: anywhere。
• 验证键盘操作：只按 Tab 走一遍页面，每个可交互元素都该有清晰的焦点框，按 Enter 能激活聚焦的按钮。

动手任务

打开本课实验区：

1. 把预览窗口从宽拖到窄（小于 600px），确认导航从横排变竖排、可以正常点击，再拖宽观察恢复。
2. 只用 Tab 键在页面上走一圈，确认每个按钮的焦点框都看得清；再用鼠标点击按钮，确认鼠标操作不出现焦点框——这就是 :focus-visible 的意义。
3. 检查「☰」按钮报出的名称是不是「打开菜单」（用读屏，或在开发者工具的「无障碍」面板里看它的 accessible name）。
4. 找到页面里故意放的长内容段落，点击「切换内部滚动」，确认窄屏下它在容器内滚动，页面本身不再横向滚动。

常见错误

• outline: none 一删了之：键盘用户从此找不到焦点；要用 :focus-visible 换一个更精致的样式，而不是消灭焦点。
• 断点照抄设备清单：断点服务于内容，不是设备型号表；内容撑坏了才加断点。
• 给 div 绑 onclick 当按钮用：div 不能被 Tab 聚焦也读不出名称，可交互元素就用 <button> 和 <a>。
• viewport meta 漏写：手机会按约 980px 的桌面宽度渲染再缩小，媒体查询看起来「不生效」；先检查 <meta name="viewport" content="width=device-width, initial-scale=1">。

检查与复盘

完成下方检查题确认理解。自查清单：

• 能说出自己页面的断点数值和它服务的布局变化
• 纯键盘走完整个页面，焦点始终可见、顺序合理
• 窄屏下没有页面级横向滚动，长内容在容器内部滚动

参考资料

• MDN：使用媒体查询 —— 语法与常用特性
• MDN：:focus-visible —— 键盘焦点样式的标准做法
• MDN：WAI-ARIA 基础 —— aria-label 等属性的入门