响应式 CSS 实战：媒体查询、容器查询与无障碍偏好

媒体查询不应按“iPhone、平板、电脑”硬编码设备型号。页面应先让内容在窄视口自然流动，再在布局确实需要时设置断点。Media Queries 能查询视口、媒体类型、输入设备与用户偏好；组件只关心自身空间时，Container Queries 往往比全局屏幕宽度更合适。

用内容决定断点

先写单列/流式布局，再逐渐扩展列数；断点由导航是否拥挤、文本行长、卡片最小宽度和操作可达性决定。使用 minmax、auto-fit、相对长度和 clamp 让空间连续适配，媒体查询只处理结构变化。不要用 device-width、device-height 等过时设备特性模拟浏览器视口。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.card-shell {
  container-type: inline-size;
}

@container (min-width: 36rem) {
  .card {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
  }
}

容器查询观察的是声明了 container-type 的祖先内容盒；需要考虑不支持容器查询时的可用基础布局。媒体查询仍适合视口结构、打印、颜色方案、对比度、减少动态效果、指针精度和悬停能力。hover:none 的触屏设备不能依赖 hover 才显示关键操作。

以真实用户环境验收

缩放到 200% 或更高、超长文字、中文换行、系统字体放大、横竖屏、键盘导航、触屏和打印都要覆盖。响应式不等于只检查几种像素宽度；还要确认焦点不被遮挡、触控目标可操作、横向滚动不是意外、动态效果尊重 prefers-reduced-motion。

打印样式可隐藏导航与按钮，但保留链接语义和正文；prefers-color-scheme 可提供深浅色偏好，用户手动主题设置应有明确优先级。不要用全局 !important 粗暴关闭所有动画，因为部分动效承担状态或方向提示；应将非必要运动减弱或移除并保留信息。

检查清单

1. 断点由内容失效决定，而不是照搬设备品牌尺寸？
2. 组件放进窄侧栏时是否能独立适配？
3. hover、精确指针、打印和减少动态效果是否有相应体验？
4. 放大文字、长标题和键盘焦点是否仍清楚、不溢出？
5. 每个兼容降级是否仍可读、可操作且不隐藏信息？

参考：MDN Using Media Queries、MDN Container Queries、MDN Reduced Motion、MDN Media Queries for Accessibility、WCAG 2.2。