最可靠做法是用 display: none 配合 @media，避免整数断点、慎用 visibility/opacity/负定位，统一语义化类名并补 aria-hidden。
直接用 display: none 配合 @media 是最可靠的做法，其他方式（比如 visibility: hidden、opacity: 0 或负定位）在响应式场景下容易出问题——不是占位错乱，就是交互残留，或者被读屏软件误读。
为什么不能只写 @media (max-width: 768px) 就完事？
断点值卡在设备边界上最容易翻车。iPad 竖屏是 768px，但它的 width 媒体特性刚好命中 max-width: 768px，而横屏时又变成 1024px，导致你本想“只在手机隐藏”的规则，意外把 iPad 竖屏也干掉了。
- 改用
@media (max-width: 767px)，避开整数边界 - 需要精准控制 iPad 竖屏？加
and (orientation: portrait) - 想区分触控设备？用
and (pointer: coarse)比单纯看宽度更靠谱 - 别碰
max-device-width——现代浏览器基本不认，DevTools 模拟器返回值也不准
display: none 和 visibility: hidden 到底该选哪个？
绝大多数响应式隐藏场景必须选 display: none。它真正移出渲染流，后续元素会自动填补位置，flex/grid 布局不会塌陷，也不会因父容器高度异常而错位。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
visibility: hidden保留原始尺寸，常导致height: 100%失效、点击穿透、滚动条错位 -
opacity: 0仍参与布局和事件捕获，且无法阻止键盘焦点进入 -
position: absolute; left: -9999px在部分安卓 WebView 中 focus() 行为异常，且对屏幕阅读器不友好 - 如果真要过渡动画，得组合
opacity+visibility，display本身不可 transition
类名怎么起才不容易踩坑？
别每个组件都手写一遍媒体查询。集中定义语义化类名，比如 .hidden-mobile，再统一用 @media 控制，否则漏写、权重冲突、断点不一致的问题会越积越多。
- 类名带设备意图：如
.hidden-mobile、.hidden-tablet，比.hide-sm更易理解 - 加
!important是为了压住组件库可能写的行内样式或高权重display: block - HTML 里直接写
class="hidden-mobile"，别用 JS 动态增删——破坏 CSSOM，调试困难，且 SSR 下首屏可能闪现 - 含重要信息的元素（如筛选提示、错误说明），仅用
display: none会让屏幕阅读器跳过，得补aria-hidden="true"
为什么写了 display: none 还是没隐藏？
90% 是媒体查询根本没生效，而不是 CSS 写错了。先打开 DevTools 的响应式调试工具，看当前视口宽度是否真的落在你写的断点范围内。
- 检查页面有没有
<meta name="viewport" content="width=device-width, initial-scale=1">——没有它，移动端浏览器默认按桌面宽度（约 980px）渲染，@media (max-width: 480px)永远不触发 - CSS 加载顺序影响权重：你的媒体查询样式必须在通用样式之后，否则被覆盖
- 选择器没命中：比如写了
@media (max-width: 767px) { .sidebar } { display: none; }，括号位置错，语法非法 - 某些 UI 库（如 Ant Design）会给组件加内联
style，得用!important或更高优先级选择器才能覆盖
真正麻烦的不是写几行 @media，而是当设计要求“折叠屏展开后隐藏侧边栏”“横竖屏切换时恢复某按钮”这类动态场景时，单靠像素断点已经不够——这时候得结合 pointer、hover、orientation 多条件判断，而且每加一个条件，都要在真机上验证 Safari 和安卓 WebView 的行为是否一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
