@media写分辨率隐藏规则需用px单位、英文标点、正确空格；移动端优先建议max-width:767px；ipad竖屏应加orientation:portrait；必须外层写媒体查询再嵌套选择器；display:none彻底移出流，visibility:hidden保留占位；viewport meta缺失和css顺序错误是常见失效原因。
怎么用@media写分辨率隐藏规则
直接写 @media (max-width: 768px) 就能控制小屏隐藏，但很多人漏掉关键点：单位必须是 px（不能写 em 或 rem），而且括号里不能加空格或中文标点。浏览器对语法错误很敏感，写成 @media (max-width:768px)（没空格）也能运行，但写成 @media (max-width：768px)（中文冒号）就完全失效。
常见错误现象：display: none 写了却没隐藏，八成是媒体查询根本没触发——先检查控制台的「响应式调试工具」，看当前视口宽度是否真落在你写的断点范围内。
- 移动端优先场景下，建议用
@media (max-width: 767px)，避免和 Bootstrap 的sm断点（768px）重叠导致意外显示 - 如果目标是 iPad 竖屏（768px），别只写
max-width: 768px，它会把横屏 iPad（1024px）也包进去；更稳妥的是加orientation: portrait - 不要在
@media里重复写整个选择器，比如.header { @media (...) { display: none; } }是非法语法，必须写成@media (...) { .header { display: none; } }
display: none 和 visibility: hidden 的区别在哪
想“隐藏但占位”用 visibility: hidden，“彻底移出文档流”才用 display: none。这点在响应式布局里特别关键：比如导航栏在小屏隐藏后，如果用了 visibility: hidden，下面的内容不会上移，页面留白难看；而 display: none 会让后续元素自然填补位置。
但要注意：用 display: none 隐藏的元素，其子元素绑定的事件监听器、focus 状态、甚至 IntersectionObserver 回调都会停止工作；如果只是临时视觉隐藏（比如加载中遮罩），反而该用 visibility: hidden 或 opacity: 0。
-
display: none会阻止元素参与渲染流程，性能更好，适合永久性隐藏 -
visibility: hidden仍会触发 layout 和 paint，但跳过 composite，适合需要保留布局上下文的场景 - 动画过渡时不能用
display做渐变（CSS 不支持 transition display），得换用opacity+visibility
为什么在 Chrome DevTools 里切分辨率没反应
最常被忽略的是 viewport meta 标签缺失。没有 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端浏览器会强制以桌面宽度渲染（通常是 980px），导致你写的 @media (max-width: 480px) 永远不匹配。
另一个坑是 CSS 加载顺序：如果媒体查询样式写在普通样式后面，且选择器权重相同，它会被覆盖；反过来，如果写在前面，又可能被后面无媒体查询的 display: block 覆盖。务必确保媒体查询的规则在最终生效的 CSS 中处于合理位置。
- 检查 HTML head 里有没有漏掉 viewport meta 标签
- 在 DevTools 的「Elements」面板里右键元素 → 「Force element state」→ 「:hover」之类没用，但可以手动修改
style属性快速验证是否是 CSS 问题 - 用
window.matchMedia("(max-width: 768px)").matches在 Console 直接测断点是否命中，比猜更可靠
要不要用 JavaScript 动态切换 class 来隐藏
纯 CSS 媒体查询足够时，别用 JS。加一层 JS 不仅增加首屏阻塞风险，还会引入同步问题：比如用户旋转屏幕瞬间，JS 还没执行完，CSS 已经按新尺寸渲染，导致闪动或错位。
但有些场景绕不开 JS：比如要根据设备像素比（window.devicePixelRatio）隐藏高清图占位符，或者监听 resize 事件做复杂逻辑判断（如“仅在宽度小于 500px 且滚动超过 100px 时隐藏”）。这时候用 JS 是合理的，但应节流并用 requestAnimationFrame 批量更新。
- 简单分辨率适配，坚持用
@media—— 它由浏览器原生优化，无 JS 执行开销 - 如果必须用 JS，优先用
matchMedia().addEventListener()替代反复轮询window.innerWidth - 避免在
resize里直接操作 DOM 样式，改用切换预设 class，让 CSS 控制最终表现
媒体查询本身很简单，难的是搞清它和 viewport、CSS 加载顺序、设备实际渲染宽度之间的耦合关系。很多“没生效”问题，根源不在写法，而在你以为的分辨率和浏览器实际计算的不一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
