display:none 在媒体查询中失效通常因特异性或加载顺序问题，需用开发者工具检查覆盖规则；它移除元素于无障碍树，影响可访问性；JS 应用 getComputedStyle 判断，打印样式需确保正确引入。
display:none 在媒体查询里失效？检查是否被更高优先级样式覆盖
直接写 @media (max-width: 768px) { .nav { display: none; } } 却没反应，大概率不是语法错，而是 CSS 特异性（specificity）或加载顺序问题。浏览器会按“后声明、高优先级”规则应用样式，display: none 很容易被后面更具体的规则（比如 .header .nav.active 或内联 style="display: flex"）强行覆盖。
- 用浏览器开发者工具的“Computed”面板，点开
display属性，看哪条规则真正生效，灰色划掉的说明被覆盖了 - 避免依赖单一类名切换，改用带媒体查询的组合类，例如
.nav--hidden-mobile配合@media (max-width: 768px) { .nav--hidden-mobile { display: none; } } - 慎用
!important—— 它能临时压住冲突，但会让后续维护变脆弱；真要用，只加在媒体查询内部，别污染全局
display:none 不触发重排，但会影响可访问性（a11y）
display: none 确实不占布局空间、不渲染、不触发布局计算（reflow），性能友好。但它同时会把元素从渲染树和无障碍树（accessibility tree）中彻底移除 —— 屏幕阅读器读不到，键盘 Tab 也跳过它。这不是 bug，是规范行为。
- 如果隐藏内容仍需被辅助技术感知（比如折叠面板的隐藏区域），改用视觉隐藏技巧：
position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; - 若只是临时收起导航菜单，且用户明确知道操作后内容消失，
display: none没问题；但表单错误提示、状态反馈这类关键信息，不能靠它“隐身” - 不要用
display: none来“隐藏但保留语义”，那属于职责错位 —— 该用 ARIA 属性（如aria-hidden="true"）配合可见性控制
JavaScript 动态切 display:none，注意 offsetHeight 和 getComputedStyle 的差异
想用 JS 判断某个元素当前是否被媒体查询隐藏，别直接读 element.style.display —— 它只返回内联样式，查不到 CSS 文件或媒体查询里的值。
- 正确方式是：
getComputedStyle(element).display === 'none'，这个能读到最终计算值 - 但要注意，
offsetHeight或offsetWidth为 0 时，不一定等于display: none（也可能是visibility: hidden、父级overflow: hidden裁剪、或者宽高设为 0） - 如果 JS 在页面加载初期就执行（比如 DOMContentLoaded 里），而 CSS 还没解析完，
getComputedStyle可能返回空字符串或初始值 —— 加个requestAnimationFrame延迟一帧再读更稳妥
display:none 在打印样式表（@media print）中要格外小心
很多网站用 @media print { .no-print { display: none; } } 来隐藏页眉页脚，但实际打印预览里仍出现，原因常被忽略：打印样式表默认不继承屏幕样式，且部分浏览器对 @media print 解析有延迟或限制。
立即学习“前端免费学习笔记（深入）”；
- 确保打印样式表已通过
<link rel="stylesheet" media="print" href="print.css">正确引入，而不是仅靠@import或内联@media print - 避免嵌套媒体查询，比如
@media screen { @media (max-width: 768px) { ... } }里再写@media print—— 多数浏览器不支持这种嵌套 - 打印时若发现隐藏失效，先检查是否用了
visibility: hidden替代 —— 它不影响布局，但打印时依然可见；必须用display: none才真正剔除
