写了 display: none 却没隐藏，最常见原因是媒体查询未触发：viewport meta 缺失、断点单位错误（如漏空格或用 em）、实际视口宽度不符预期；需检查 meta 标签、语法规范及调试工具实测宽度。
直接用 @media 配合 display: none 就能实现，但写错一行 CSS 或漏掉一个 meta 标签，它就完全不生效。
为什么写了 display: none 却没隐藏？
最常见原因是媒体查询根本没触发——浏览器压根没按你预期的宽度解析视口。检查三件事：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在，缺了它移动端会以 980px 渲染，@media (max-width: 480px)永远不匹配 - 断点单位必须是
px，写成em或漏掉空格（比如@media(max-width:768px)）会导致语法错误，浏览器静默忽略整条规则 - 用浏览器「响应式调试工具」看当前
width值，别凭设备型号猜——iPhone 14 Pro 竖屏是 390px，iPad 竖屏是 768px，横屏就是 1024px
@media 断点该设多少？
没有万能值，取决于你要隐藏什么、以及谁在用。常见组合：
- 只在手机竖屏隐藏：用
@media (max-width: 767px) and (orientation: portrait)，避开 iPad 竖屏误杀 - 兼顾主流框架：Bootstrap 的
sm断点是 576px，md是 768px，若混用框架类名（如d-none d-md-block），建议统一用767px而非768px - 隐藏广告位或侧边栏这类“非核心内容”：
@media (max-width: 480px)更稳妥，覆盖绝大多数手机竖屏场景
选择器写法和优先级怎么避坑？
别把媒体查询嵌进选择器里，CSS 不支持这种写法：.sidebar { @media (...) { display: none; } } 是非法的。正确结构只能是：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 767px) {
.sidebar,
.ad-banner,
.desktop-only-widget {
display: none;
}
}
如果还是不生效，大概率是优先级被覆盖：
- 组件库或框架可能写了
display: block !important，这时你得加!important（虽然不推荐，但现实里常需妥协） - 避免用过于宽泛的选择器如
div或*[class*="side"]，容易误杀其他元素；给要隐藏的元素加明确 class，比如hidden-mobile - JS 动态设置过
style.display = 'block'？那内联样式权重更高，CSS 规则会被跳过——改用 class 切换更可靠：el.classList.add('hidden-mobile')
隐藏后还有哪些副作用？
display: none 不只是“看不见”，它会真实改变渲染行为：
-
getComputedStyle(el).display === 'none'才能准确判断是否被媒体查询隐藏；el.style.display只读内联样式，毫无意义 - 子元素若用了
position: fixed或absolute，父容器一隐藏，它们可能脱离上下文、跑出视口甚至撑出滚动条——得单独重置：.sidebar [fixed-element] { position: static; } - 屏幕阅读器完全忽略
display: none元素，这是规范行为。但如果隐藏的是错误提示、筛选状态或操作入口，就得补aria-hidden="true"或换用视觉隐藏方案 - IntersectionObserver 默认不会触发
display: none元素的回调，threshold: 0也无效——得在隐藏前手动触发一次逻辑，或改用visibility: hidden+opacity过渡
真正麻烦的不是怎么写那几行 CSS，而是隐藏之后，那些没人盯着的定时器、监听器、焦点状态和可访问性链路，全得你手动兜底。
