display: none 配合 @media 是最可靠轻量的响应式隐藏方案，但易因优先级冲突、可访问性缺失及 js 逻辑断裂导致失效；应避免全局 !important，用组合类提升特异性，慎选 visibility: hidden，确保无障碍与脚本兼容。
直接用 display: none 配合 @media 是最可靠、最轻量的响应式隐藏方案，但失效、错位、可访问性断裂这三类问题占了实际报错的 80% 以上。
为什么 display: none 在媒体查询里不生效？
不是语法错，而是 CSS 优先级或加载顺序被绕过了。比如 Bootstrap 的 .d-md-block 带 !important，你写的 @media (max-width: 768px) { .nav { display: none; } } 就会被覆盖。
- 打开开发者工具 → “Computed” 面板 → 点开
display属性，看哪条规则被划掉（灰色），它就是“赢”的那条 - 避免只靠类名切换，改用组合类：给元素加
class="nav nav--hidden-mobile"，再写@media (max-width: 768px) { .nav--hidden-mobile { display: none; } } - 真要用
!important，只加在媒体查询内部，别污染全局样式表
display: none 和 visibility: hidden 到底该选哪个？
关键看是否要保留布局空间和交互上下文。移动端屏幕寸土寸金，留白比隐藏更伤体验。
- 用
display: none：隐藏整个模块（如桌面端右栏）、移除无语义装饰、断开 JS 事件绑定需求 - 慎用
visibility: hidden：仅当你需要动画过渡（配合opacity）、或必须保持父容器高度（比如 Flex 容器不能塌陷）时才考虑 - 绝对别混用：给父元素设
display: none，再对子元素设visibility: visible—— 子元素照样不可见
隐藏后 JS 还能读到这个元素吗？
能，DOM 节点还在，但渲染层已剥离。很多脚本会因此出错，尤其依赖尺寸或焦点的逻辑。
- 判断是否被媒体查询隐藏，必须用
getComputedStyle(el).display === 'none'，别读el.style.display（它只返回内联样式） - 如果用了
offsetHeight > 0做懒加载或滚动监听，display: none下永远为 0 —— 得提前手动触发一次，或换用IntersectionObserver并传{threshold: 0} - 父容器隐藏后，子元素若用了
position: fixed或absolute，可能跑出视口外还撑出滚动条 —— 必须单独重置它们的定位上下文或加visibility: hidden
隐藏了，但屏幕阅读器用户看不见怎么办？
display: none 会把元素从无障碍树中彻底剔除，这是规范行为，不是 bug。但如果你隐藏的是折叠面板内容、错误提示、或跳转链接，这就成了可访问性事故。
- 纯装饰元素：加
aria-hidden="true"即可 - 需保留言语但视觉隐藏：不用
display: none，改用视觉隐藏技巧，例如：position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; - 隐藏的是表单必填字段、关键导航链接、状态反馈 —— 别隐藏，改用逻辑控制（比如条件渲染）或提供替代入口
真正难处理的从来不是怎么写 display: none，而是写完之后——有没有人还在 JS 里读它的 offsetTop，有没有键盘用户卡在它曾经占据的 tabindex 上，有没有屏幕阅读器因它突然跳过半段说明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
