响应式隐藏与显示需按断点、元素和方式精准控制：display: none最常用但滥用损害可访问性与SEO；应默认显示关键内容，小屏逐步隐藏非核心区块；表格列隐藏须用data-column+类控制，不可用nth-child。
响应式隐藏与显示不是“要不要藏”，而是“在什么断点、对什么元素、用什么方式藏”——display: none 是最常用手段，但直接滥用会导致可访问性断裂、SEO 降权、JS 行为失效，甚至破坏语义结构。
用 @media 配合 display 控制断点显隐
这是最直白也最容易出错的方式。核心是：默认显示关键内容，小屏下逐步隐藏非核心区块（如侧边栏、广告位、冗余描述）。
-
.sidebar和.extra-info在桌面端正常渲染，在@media (max-width: 768px)下设为display: none - 避免嵌套媒体查询：不要在某个类内部再写
@media，统一收口到 CSS 文件底部或单独的responsive.css - 断点值要和设计稿对齐，别硬套 768/480 —— 现在主流手机宽度是 390px（iPhone 12+）、414px（iPhone Plus）、360px（安卓中端机），建议用
360px、414px、768px、1024px四档 - 注意：
display: none的元素不参与渲染、不占空间、不被屏幕阅读器读取，也不触发:hover或 JS 事件监听
visibility: hidden 和 opacity: 0 的适用场景
它们都“看起来隐藏”，但行为完全不同：
-
visibility: hidden保留盒模型位置，仍影响布局流，屏幕阅读器会跳过它，适合临时折叠但需维持排版稳定的区域（比如切换中的 tab 面板） -
opacity: 0元素仍在文档流中、可接收事件、会被读屏软件读到 —— 所以不能当“真隐藏”用；仅适合做淡入淡出动画，且必须搭配pointer-events: none防止误点 - 千万别用
opacity: 0替代display: none来“隐藏导航菜单”，否则键盘用户按 Tab 仍会聚焦到不可见按钮上
表格列的响应式隐藏必须靠 data-column + 类控制
HTML 表格没有“列”这个原生语义节点，<colgroup></colgroup> 不支持 display，所以不能靠样式直接控制整列。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 给每个
<th> 和对应所有 <code><td> 添加统一的 <code>data-column="email"属性 - 定义 CSS 类如
.column-email { display: none; } - 用 JS 切换类：
document.querySelectorAll('[data-column="email"]').forEach(el => el.classList.toggle('column-email')) - 不要用
nth-child(3)这类位置选择器——列顺序一变就全崩 - 隐藏后记得同步更新
<thead> 中的 <code><th>，否则表头和数据错位 <h3> <code>hidden属性不是响应式的替代方案hidden是 HTML5 布尔属性，语义明确、无需 CSS，但它不响应媒体查询 —— 它只表达“当前不该显示”，跟屏幕尺寸无关。- 可以配合 JS 使用：
el.hidden = window.innerWidth ，但不如 CSS 媒体查询高效 - 不要混用：
hidden和display: none同时存在时，hidden优先级更高，但可维护性极差 - 真正该用
hidden的场景是：模态框关闭时、表单验证失败提示未激活时、动态加载内容尚未 ready 时
最常被忽略的一点：隐藏不等于删除。被
display: none的元素仍会下载图片、执行内联脚本、触发IntersectionObserver回调（除非你手动取消监听）。如果某块内容在移动端完全不需要，最好从服务端就过滤掉，而不是靠 CSS 隐藏。 - 可以配合 JS 使用：
