最常见原因是未设置viewport meta标签导致媒体查询不生效；其他包括漏写px单位、使用中文标点、CSS加载顺序错误、选择器优先级不足，以及display:none与visibility:hidden的适用场景混淆。
为什么写了 @media (max-width: 768px) 元素却没隐藏
最常见的情况是媒体查询压根没生效，而不是样式写错了。先打开 Chrome DevTools 的「响应式调试工具」，把窗口缩到 768px 以下，看右上角显示的实际视口宽度——如果显示的是 980px 或更高，说明页面没加 <meta name="viewport" content="width=device-width, initial-scale=1">，浏览器在用桌面模式渲染，@media 自然不会触发。
其他高频原因包括：
-
@media (max-width:768)漏了px单位，浏览器直接忽略整条规则 - 用了中文标点，比如
@media (max-width：768px)（冒号是全角） - CSS 文件加载顺序错乱，后加载的通用样式覆盖了媒体查询里的
display: none - 选择器优先级不够，比如媒体查询里写的是
.nav-item，但外层有header .nav-item且没被覆盖
display: none 和 visibility: hidden 在响应式中怎么选
关键区别不在“能不能隐藏”，而在“是否保留布局空间”：
- 用
display: none：元素彻底退出文档流，后续内容会上移填补空位，适合导航栏、侧边栏这类需要腾出空间的模块 - 用
visibility: hidden：元素还在原位占着空间，只是不可见，适合临时遮罩、加载态、或需要保持焦点/事件监听的场景
特别注意：display: none 会让子元素的 focus、IntersectionObserver 回调、甚至 click 事件监听器全部失效；而 visibility: hidden 虽然看不见，但这些逻辑照常运行。
立即学习“前端免费学习笔记（深入）”；
动画过渡时别碰 display——CSS 不支持 transition display，想做淡入淡出得配 opacity + visibility。
断点设多少才靠谱：别抄 768px，要看内容和设备真实视口
2026 年主流设备的视口宽度已经不是教科书上的固定值：
- iPhone 14 Pro 横屏是 568px，不是 480px
- iPad Air（第 5 代）竖屏是 744px，比 768px 小
- 折叠屏展开后常超 800px，硬卡 768px 会误判
更务实的做法是：
- 移动端默认显示关键内容，用
@media (min-width: 769px)控制桌面端增强展示（避开 iPad 竖屏临界点） - 真遇到文字换行、按钮重叠、图标被截断，才是该加断点的信号，不是看设备型号
- 需要横屏手机微调？加一层
@media (min-width: 576px) and (max-width: 768px)
别用 max-device-width——它读的是设备物理分辨率，不是当前视口宽度，现代浏览器基本不依赖它。
如何避免响应式隐藏引发可访问性问题
用 display: none 隐藏的元素，屏幕阅读器默认跳过，这对纯装饰性内容没问题；但如果隐藏的是操作入口（如“编辑”按钮）、关键状态提示（如“已保存”），就得补救：
- 给隐藏元素加
aria-hidden="true"明确告知辅助技术忽略它 - 若内容语义重要但仅限大屏，改用
clip-path: inset(100%)+position: absolute实现视觉隐藏但保留在可访问树中 - 避免对整个表单区域或导航容器用
display: none，容易让键盘用户卡在半途
真正难处理的是“部分隐藏”：比如只在小屏隐藏某个图标但保留文字。这时别只靠 CSS 隐藏，要在 HTML 层面用 aria-label 补全语义，否则语音用户可能听不到完整操作意图。
