display: none 是响应式隐藏元素最直接有效的方式，它使元素彻底退出文档流、不占空间、不触发重排；应避免使用 visibility: hidden 或 opacity: 0 替代，并遵循移动优先原则，用 min-width 断点配合显式声明显示/隐藏状态。
用 @media 隐藏元素时，display: none 是最直接有效的方式
响应式中隐藏内容，核心不是“删掉”，而是“不渲染”。display: none 会让元素彻底退出文档流，不占空间、不触发重排，性能开销最小。别用 visibility: hidden 或 opacity: 0 替代——它们仍占布局位置，可能影响点击区域或无障碍访问。
常见错误是只写桌面端样式，忘了在小屏下显式恢复显示：
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
/* ❌ 错误：没写 desktop 端的 display: block，依赖默认值不可靠 */
推荐写法是“移动优先”，先设默认隐藏，再在大屏下显示：
-
.nav-mobile { display: block; }（默认手机端显示） @media (min-width: 769px) { .nav-mobile { display: none; } }@media (min-width: 769px) { .nav-desktop { display: block; } }
display 和 visibility 在媒体查询中的行为差异
两者都能让内容“看不见”，但语义和效果完全不同：
立即学习“前端免费学习笔记（深入）”；
-
display: none：元素被移除，DOM 仍在，但不参与渲染、不响应事件、不被屏幕阅读器读取（除非加aria-hidden="false"手动干预） -
visibility: hidden：元素保留占位，仍可被聚焦、可被 JS 获取尺寸、屏幕阅读器可能读取（取决于aria-hidden设置）
典型误用场景：用 visibility: hidden 隐藏导航菜单，结果小屏下焦点还能跳进去，键盘用户卡住。真要隐藏交互内容，必须用 display: none。
