最稳妥方案是用@media配合预设类名（如.hidden-mobile）控制显隐，使用display: none真正移除渲染流，避免visibility: hidden占位问题，兼顾可访问性与动效敏感用户需求。
直接用 @media 配合类名控制显隐最稳妥，别依赖内联样式或 JS 切换，否则响应式失效快、维护成本高。
用 display: none 而不是 visibility: hidden
前者真正移除渲染流，后者只隐藏但占位，会导致布局错位或点击穿透。移动端常因父容器高度塌陷出问题，所以必须用 display。
-
display: none在媒体查询中生效后，元素不参与文档流，不影响其他元素位置 -
visibility: hidden会保留原始尺寸，容易让height: 100%或flex布局异常 - 如果需要动画过渡，得搭配
opacity和transition，但display本身不可动画
预设类名比手写媒体查询更易复用
每个组件都写一遍 @media (max-width: 768px) { .xxx { display: none; } } 很容易漏、难统一。建议集中定义通用类：
@media (max-width: 768px) {
.hidden-mobile { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.hidden-tablet { display: none !important; }
}
@media (min-width: 1025px) {
.hidden-desktop { display: none !important; }
}
- 加
!important是为了覆盖组件内部可能写的display: block行内或高权重样式 - 类名语义清晰，比如
<div class="hidden-mobile"> 一眼知道作用 <li>避免在 JS 中动态增删类来模拟响应式，那会破坏 CSSOM 性能且难以调试</li> <h3>注意 <code>prefers-reduced-motion和屏幕阅读器兼容纯视觉隐藏不等于可访问性隐藏。如果元素含重要信息（如筛选提示、操作说明），仅用
display: none会让屏幕阅读器跳过它。立即学习“前端免费学习笔记（深入）”；
- 对辅助技术需隐藏的内容，改用
aria-hidden="true"+display: none - 若要兼顾动效敏感用户，可在媒体查询中加
@media (prefers-reduced-motion: reduce)控制过渡行为 - 别用
height: 0; overflow: hidden替代display: none—— 这类 hack 在 Safari iOS 上有重绘 bug，且仍可能被读屏软件捕获
真正麻烦的不是写几行媒体查询，而是当设计稿频繁调整断点、或某类设备（比如折叠屏）横竖切换时，
min-width/max-width的边界值是否覆盖了所有 viewport 变化场景。这时候靠类名+预设断点反而比“精准匹配设备”更可靠。 - 对辅助技术需隐藏的内容，改用
