应避免在@media中直接用display: none隐藏元素，因其导致布局塌陷、焦点丢失和可访问性问题；推荐visibility: hidden配合aria-hidden、opacity+pointer-events或屏幕外定位等兼顾语义与体验的方案。

用 @media 控制元素显隐时，别直接写 display: none 就完事

媒体查询里写 display: none 确实能隐藏元素，但容易引发布局塌陷、焦点丢失、屏幕阅读器不可访问等问题。尤其当元素本身有交互（如按钮、表单）或依赖 DOM 位置（如绝对定位参照物）时，display: none 会彻底移出渲染流，后续恢复显示可能错位或失焦。

更稳妥的做法是组合使用视觉隐藏与可访问性保留：

• visibility: hidden：保留占位，不响应事件，对屏幕阅读器仍可能暴露（需配合 aria-hidden="true"）
• opacity: 0; pointer-events: none：透明且不可点，但占位、可聚焦、屏幕阅读器仍可读（适合过渡场景）
• position: absolute; left: -9999px：移出视口，保留语义和可访问性（经典“屏幕外隐藏”）

移动端优先下，@media (max-width: 768px) 不等于“只在手机上生效”

这个断点常被误认为专用于手机，其实它匹配所有宽度 ≤768px 的设备——包括折叠屏手机展开后的小窗模式、平板横屏缩放、甚至桌面浏览器手动缩窄窗口。真正要区分设备类型，CSS 并不提供 device-type: mobile 这类语法；靠的是 viewport 设置 + 合理断点 + 内容自适应。

推荐做法：

• 在 中确保有
• 用移动优先写法：基础样式默认适配小屏，再用 @media (min-width: 769px) 增量增强大屏体验
• 避免硬编码 “iPhone X” 或 “iPad Pro” 尺寸，优先按内容断点（如导航栏换行临界点）

display 切换导致重排重绘，动画卡顿怎么办

在媒体查询中切换 display: block ↔ none 会触发强制重排（reflow），如果伴随高度变化或兄弟元素流动，滚动或 resize 时容易卡顿。尤其是 Safari 对 display 切换的优化较弱。

替代方案（适用于需动画/平滑切换的场景）：

• 用 max-height + overflow: hidden 模拟展开收起（需预设合理最大值）
• 用 transform: scale(0) + opacity 实现 GPU 加速隐藏（注意 transform 不影响文档流）
• 结合 transition 仅作用于 opacity 和 transform，避开 height、margin 等触发布局的属性

/* 示例：用 transform + opacity 平滑隐藏 */
.element {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
@media (max-width: 768px) {
  .element {
    opacity: 0;
    transform: translateY(-10px);
  }
}

媒体查询嵌套在 CSS-in-JS 或构建工具中，prefers-reduced-motion 容易被忽略

很多项目只处理了尺寸响应，却漏掉系统级偏好。比如用户在 macOS / Windows 设置中启用了“减少运动”，@media (prefers-reduced-motion: reduce) 应该让所有非必要动画降级为淡入淡出或直接跳转。

常见遗漏点：

• 轮播图自动播放 → 改为手动触发
• 下拉菜单滑动展开 → 改为无过渡直接显示
• CSS 动画背景/微交互 → 用 animation-duration: 0.01ms 强制禁用（避免设为 0s 被部分浏览器忽略）

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

实际项目里，最常出问题的不是写不对语法，而是把媒体查询当成“开关”，忽略了它和 DOM 结构、可访问性、性能优化之间的耦合关系。断点数值、隐藏方式、动画策略，都得跟着具体元素的语义和行为走。