媒体查询本身不隐藏内容，真正隐藏需靠display: none；常见失效原因包括viewport缺失、断点错位、样式层叠覆盖及语法错误（如中文冒号），且display: none与visibility: hidden作用机制不同，需按布局需求选择。
媒体查询本身不隐藏内容，display: none 才真正移除元素；但很多人写了 @media 却没生效，问题通常出在 viewport 缺失、断点错位或 display 层叠被覆盖。
为什么写了 @media (max-width: 768px) { .sidebar { display: none; } } 却没隐藏？
最常踩的坑是：viewport meta 标签没写，或者写错了。没有 <meta name="viewport" content="width=device-width, initial-scale=1.0">，移动端浏览器会以 980px 宽度渲染，你写的 max-width: 768px 永远不会触发。
- 检查 Chrome DevTools 的「响应式调试工具」左上角显示的实际视口宽度，不是设备物理分辨率
- 确认 CSS 文件已加载，且该规则没被更高优先级样式（如内联 style 或 !important）覆盖
-
@media写法必须用英文括号和冒号，@media (max-width:768px)（无空格）能运行，但@media (max-width：768px)（中文冒号）直接失效
display: none 和 visibility: hidden 在媒体查询里怎么选？
目标是“腾出空间让其他内容上移”，必须用 display: none；如果只是临时遮挡（比如加载态），才考虑 visibility: hidden 或 opacity: 0。
-
display: none彻底移出文档流，后续元素自然填补位置，适合导航栏、侧边栏等结构性隐藏 -
visibility: hidden仍占布局空间，会导致小屏下页面留白难看，且其子元素的focus、IntersectionObserver回调都会暂停 - 动画过渡不能用
display，想做淡入淡出得组合opacity+visibility
移动端优先时，别只写 max-width，小心 iPad 竖屏误判
单纯用 @media (max-width: 768px) 会把 iPad 竖屏（768px）和横屏（1024px）都包进去——但你往往只想隐藏竖屏下的冗余模块。
- 更精准写法：
@media (max-width: 768px) and (orientation: portrait) - 若目标是窄屏手机，断点建议按内容断裂点定，比如导航文字开始换行的宽度是 623px，就用
max-width: 640px，比硬套 iPhone 尺寸更可靠 - 避免同时用
max-width: 767px和min-width: 768px，在缩放 110% 的设备上（如某些 iPad）会出现 767.5px 断层，导致样式丢失
真正容易被忽略的是：媒体查询里的 display 不是“开关”，而是“覆盖”。如果某个元素在全局样式里已经设了 display: none，又没在对应断点里显式设回 block 或 flex，它就会一直不可见——哪怕媒体查询已激活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
