viewport meta标签缺失是最常见原因，移动端@media(max-width:767px)不生效90%因该标签未加或位置错误；必须置于<head>内且在所有CSS前，content值须为"width=device-width, initial-scale=1"。
viewport meta 标签缺失是最常见原因
移动端写 @media (max-width: 767px) { .sidebar { display: none; } } 却不生效，90% 是因为 <meta name="viewport" content="width=device-width, initial-scale=1"> 没加，或加在了 CSS 后面。没有它，手机浏览器默认按 980px 宽度渲染，max-width: 767px 根本不会触发。
检查点：
- 该
<meta>必须在<head>中，且位于所有 CSS<link>或<style>之前 - content 值不能拼错，比如写成
width = device-width（等号前后有空格）或漏掉initial-scale=1 - 用 Chrome DevTools 的「Toggle device toolbar」看右上角显示的真实
width值，不是靠设备型号猜
@media 语法错误导致整条规则被静默忽略
CSS 对媒体查询语法非常敏感，错一个字符，整块规则就失效，浏览器也不会报错。
典型错误：
立即学习“前端免费学习笔记（深入）”；
-
@media(max-width:768px)——@media和括号之间必须有空格 -
@media screen and (max-width: 768em)—— 断点单位必须是px，em在这里不适用，且易受字体缩放干扰 -
@media screenand(max-width: 768px)——screen和and之间缺空格，整个条件解析失败 - 把媒体查询写进选择器内部：
.sidebar { @media (...) { display: none; } }—— 标准 CSS 不支持这种嵌套，直接无效
display: none 被更高优先级样式覆盖
即使媒体查询触发了，display: none 也可能被别的规则压住，尤其在用框架时。
常见覆盖源：
- Bootstrap 等框架的响应式类如
.d-md-block带!important，你写的普通display: none权重不够 - JS 动态设置了内联样式：
el.style.display = 'block'，内联样式的权重高于任何 CSS 规则 - 更宽泛的选择器意外命中，比如全局写了
div { display: block !important; }，会干掉你的隐藏规则
验证方式：在 DevTools 中选中元素，看 Computed 面板里 display 值是不是 none；如果是，说明生效了；如果显示 block 或其他值，点开 Styles 面板看哪条规则胜出。
打印预览或 iframe 场景下 display: none 失效
@media print 里 display: none 看似没用，往往不是写错了，而是环境没对。
关键事实：
- Chrome 默认关闭「背景图形」选项，
background-color和background-image全部不显示，容易误判为样式未加载 - 用「另存为 PDF」浏览器插件或截图工具，根本不走原生 print 流程，
@media print完全不触发 - iframe 内容若来自不同源，父页面的媒体查询无法穿透作用，需在 iframe 内单独写
- 调试时别只信 DevTools 的「Emulate CSS media type → print」，它只模拟样式加载，不模拟真实分页逻辑
最可靠的验证方式是直接按 Ctrl+P（Windows）或 Cmd+P（macOS），打开系统级打印预览窗口再观察。
