@media 必须语法正确且顺序合理，缺 viewport 标签或加载顺序错误会导致不生效；display: none 彻底移除元素，hidden 属性语义更强但效果相同；隐藏后需确保可访问性与交互链完整。
直接用 @media 配合 display: none 就行，但必须写对语法和顺序
浏览器对 @media 语法极其敏感，错一个空格或标点就整个规则失效。最常见写法是 @media (max-width: 768px) { .btn { display: none; } }，但注意三点：
- 括号内不能有中文标点，比如
max-width：768px（中文冒号）会彻底不生效 - 单位必须是
px，写em或rem不会被识别 -
@media必须包裹选择器，不能写成.btn { @media (...) { display: none; } }——这是非法嵌套，CSS 解析器直接跳过
为什么写了 display: none 却没隐藏？先查 viewport 和实际宽度
90% 的“不生效”问题其实不是 CSS 写错了，而是媒体查询根本没触发。打开 Chrome DevTools 的「响应式调试工具」，看右上角显示的当前视口宽度是多少。如果显示的是 980px，那说明页面缺了 <meta name="viewport" content="width=device-width, initial-scale=1">。没有这个标签，移动端浏览器默认以桌面宽度渲染，你写的 @media (max-width: 480px) 永远不会匹配。
另一个常见原因是 CSS 加载顺序：如果基础样式表在后，而媒体查询在前，断点规则可能被覆盖。确保媒体查询写在所有通用样式之后，或用 !important 临时验证（仅调试用）。
display: none 和 hidden 属性选哪个？场景决定
两者都能让按钮消失，但行为完全不同：
立即学习“前端免费学习笔记（深入）”；
-
display: none彻底移出渲染流，不占空间、不响应事件、不被读屏软件读取，适合永久性隐藏（如小屏下收起的主操作按钮） -
hidden是 HTML5 原生布尔属性，语义更明确：<button hidden>提交</button>，JS 控制也更干净：btn.hidden = true；但它和display: none效果一致，且不支持 CSS 过渡动画 - 别混用：如果同时写了
style="display: block"和hidden，hidden优先级更高，按钮仍不可见
隐藏按钮后，tab 键还能聚焦到它吗？可访问性常被忽略
用 display: none 或 hidden 隐藏的按钮，键盘用户按 Tab 键时会自动跳过，这是正确行为。但如果你误用了 opacity: 0 或 visibility: hidden，按钮仍在文档流中，依然能获得焦点、响应点击——这会造成可访问性缺陷和意外交互。
实操建议：
- 隐藏后手动按
Tab测试焦点流是否绕过该按钮 - 真机点一下原位置，确认无响应（尤其当按钮含
<a>或<button>时） - 若需保留语义但视觉隐藏（如 SEO 或 JS 逻辑依赖），加
aria-hidden="true"，但必须配合display: none，否则读屏软件可能仍读取
真正容易被忽略的不是怎么写媒体查询，而是隐藏之后的交互链是否断裂——按钮没了，但它的事件监听器、焦点路径、SEO 权重、甚至 SSR 渲染结果，都得同步清理或隔离。
