默认应使用 display: none 隐藏响应式元素，因其避免布局错位、可访问性断裂和 JS 异常；其他方式均有严格适用边界。
响应式隐藏元素，默认该用 display: none，不是“能不能用”，而是“不用它就容易出布局错位、可访问性断裂、JS 行为异常”。其他方式都有明确的边界条件，不能当作默认方案。
media 查询里写 display: none 却没生效？检查选择器权重和断点顺序
常见错误是媒体查询规则被更重的选择器覆盖。比如全局写了 .header { display: block !important; }，而响应式规则只是 @media (max-width: 768px) { .header { display: none; } }——后者直接失效。
- 确保媒体查询内的选择器权重 ≥ 基础样式（例如改用
.mobile-layout .header或加!important仅作调试） - 所有响应式规则统一收口到 CSS 文件底部，避免嵌套在组件类内部
- 断点值别硬套 768px，优先按真实设备宽度设：360px（安卓中端）、414px（iPhone Plus）、768px（iPad mini）、1024px（iPad Pro）
表格整列隐藏必须用 data-column，别碰 nth-child 或 <col>
HTML 表格没有“列”的渲染节点，<col> 不支持 display，nth-child(3) 一加列就全崩。真正可维护的方式是打语义标签。
- 给
<th>和所有对应<td>加相同data-column="phone" - CSS 写
[data-column="phone"] { display: none; }，再用媒体查询控制显隐 - JS 切换时用
document.querySelectorAll('[data-column="phone"]')批量操作，不依赖 DOM 位置 - 务必同步处理
<thead>和<tbody>，否则表头悬空、列对齐错乱
用 JS 切换隐藏状态时，别直接改 style.display
直接写 el.style.display = 'none' 会覆盖原始 display 值（比如从 inline-flex 强制变成 block），恢复时无法准确还原。
立即学习“前端免费学习笔记（深入）”；
- 推荐用 class 控制：
el.classList.toggle('d-none')，CSS 里定义.d-none { display: none; } - 原生
hidden属性更轻量：el.hidden = true，等价于display: none且天然支持 SSR - Vue/React 中用
v-if或{condition && <component>}</component>，比v-show更符合响应式语义 - 切忌混用：
hidden属性和style.display同时存在时，后者优先级更高
visibility: hidden 和 opacity: 0 不是“隐藏替代品”
它们看起来都看不见，但行为完全错位：一个占位但不可交互，一个透明却仍可点击。误用会导致键盘用户卡在不可见按钮上、轮播图连点两次、表格列宽残留等真实问题。
-
visibility: hidden只适合需保留占位的场景，如预加载容器、tab 面板切换过渡 -
opacity: 0必须配pointer-events: none+tabindex="-1"才算“真禁用”，否则仍是焦点陷阱 - 两者都不该用于响应式侧边栏、导航菜单、广告位——这些地方要的是“彻底退出布局”，不是“假装不在”
-
getBoundingClientRect()对visibility: hidden返回真实尺寸，对display: none返回全 0，JS 测量逻辑极易因此出错
最常被忽略的一点：隐藏不是目的，而是信息层级决策的结果。先问“这列/这个侧边栏在小屏下是否还有业务价值”，再选技术手段。否则再正确的 display: none 也救不了语义混乱的结构。
