应避免在@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 设置 + 合理断点 + 内容自适应。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>中确保有<meta name="viewport" content="width=device-width, initial-scale=1"> - 用移动优先写法：基础样式默认适配小屏，再用
@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 结构、可访问性、性能优化之间的耦合关系。断点数值、隐藏方式、动画策略，都得跟着具体元素的语义和行为走。
