display: none 是响应式隐藏最直接手段，但会损害可访问性、seo 和语义，表格列隐藏须用 data-column，hidden 属性不响应媒体查询，opacity/visibility 不可替代 display: none。
display: none 是响应式内容隐藏最直接有效的手段，但不能无脑套用——它会切断可访问性、破坏语义、干扰 SEO，且在表格或动画场景中极易出错。
用 @media 控制 display 时，断点和默认状态必须反着设计
别写“小屏下显示导航，大屏下隐藏”，而是默认显示所有关键内容，只在小屏逐步隐藏非核心区块。比如：
-
.sidebar和.ad-banner在桌面端正常渲染，在@media (max-width: 768px)下设为display: none - 断点值要对齐真实设备：优先用
360px（安卓中端）、414px（iPhone Plus）、768px（iPad）、1024px（小平板），别硬套过时的 480/768 - 禁止嵌套媒体查询：不要在某个组件类里再写
@media，统一收口到 CSS 底部或单独的responsive.css
表格列隐藏必须靠 data-column，不能用 nth-child
HTML 表格没有原生“列”节点，<colgroup></colgroup> 不支持 display，nth-child(3) 这类位置选择器一改结构就全崩。
- 给
<th> 和所有对应 <code><td> 加相同 <code>data-column="phone" - CSS 写成
.table [data-column="phone"] { display: none; }，再配合媒体查询恢复：@media (min-width: 768px) { .table [data-column="phone"] { display: table-cell; } } - 隐藏后必须同步处理
<thead> 中的 <code><th>，否则表头和数据列错位 <h3> <code>hidden属性不是响应式替代方案hidden是 HTML5 原生布尔属性，语义明确，等效于display: none，但它不响应屏幕尺寸变化，也不受媒体查询控制。- 适合场景：JS 动态控制的模态框、未登录时不渲染的入口、纯临时占位内容
- 常见错误：写了
[hidden] { display: block; }这类全局样式，会导致hidden失效——这不是 bug，是 CSS 层叠规则允许的行为 - JS 控制最简方式是
el.hidden = true，比切 class 更直接；但 IE9 及更早不支持，现代项目基本无需兼容
千万别用
opacity: 0或visibility: hidden替代display: none它们“看起来隐藏”，但行为完全不同，尤其对键盘用户和屏幕阅读器是灾难。
-
visibility: hidden元素仍占布局空间、仍能被 Tab 键聚焦，容易造成“焦点卡在空白处” -
opacity: 0元素默认仍接收点击和 focus，必须搭配pointer-events: none才安全；否则键盘用户按 Tab 会停在不可见按钮上 - 两者都不该用于隐藏交互控件，比如导航菜单、表单字段旁的提示文字——屏幕阅读器可能读不到上下文，SEO 也抓不到关键文本
真正难的不是“怎么藏”，而是判断“该不该藏”：关键信息（如姓名、金额、操作按钮）永远优先保留在小屏；隐藏的必须是非核心辅助字段，且隐藏后不能导致语义断裂或交互断连。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
