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。
隐藏内容后，父容器高度塌陷怎么办
当子元素用 display: none 隐藏，父容器若无其他内容或固定高度，会收缩到 0。这不是 bug，是预期行为。解决方式取决于需求：
- 父容器需要保持视觉高度？→ 改用
opacity: 0; pointer-events: none;+ 显式设置height或min-height - 只是想留白？→ 直接给父容器加
min-height，不依赖子元素撑开 - 隐藏的是 Flex/Grid 子项？→ 它们被
display: none后自动从布局中剔除，无需额外处理；但若用visibility: hidden，则仍参与排列，需配合flex: 0 0 auto控制
媒体查询断点选 max-width 还是 min-width？
取决于你按什么逻辑组织 CSS。现代主流是移动优先，用 min-width：
/* 默认手机样式 */
.header { padding: 12px; }
@media (min-width: 769px) {
.header { padding: 24px; }
.sidebar { display: block; }
}
@media (min-width: 1024px) {
.ads-banner { display: block; }
}
用 max-width 容易漏覆盖：比如写了 @media (max-width: 768px) 隐藏侧边栏，但没写更大屏幕的显示规则，一旦浏览器默认 display 不是 block（如某些自定义元素），侧边栏就永远不出现。
断点数值别硬编码像素值，建议用语义变量（如 --breakpoint-tablet: 769px），方便全局调整，也避免不同文件间数值不一致。
