响应式隐藏与显示需按断点、元素和方式精准控制：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 的适用场景

它们都“看起来隐藏”，但行为完全不同：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 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 隐藏。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！