hidden 属性不会随视口变化自动切换，必须用 JavaScript 配合 matchMedia 监听媒体查询并手动控制其布尔值，同时避免与 display 相关 CSS 混用，因其语义化隐藏会影响可访问性和渲染行为。
hidden 属性在响应式中不自动响应视口变化
HTML 的 hidden 属性是静态布尔属性，**它不会随屏幕尺寸自动切换**。写成 就永远隐藏；加了 hidden 后再用媒体查询覆盖它，CSS 无法接管这个属性——浏览器会优先尊重 hidden 的存在，忽略 display: block 等样式。
想用 hidden 实现“小屏隐藏、大屏显示”，必须配合 JS 监听 resize
纯 HTML/CSS 无法让 hidden 动态生效，得靠 JavaScript 主动控制。常见错误是只写 hidden 又指望媒体查询“解开它”，结果小屏大屏都看不见。
- 监听
window.matchMedia比直接监听resize更高效、更语义化 - 匹配
(min-width: 768px)时设btn.hidden = false，否则设true - 首次加载必须手动触发一次判断，否则初始状态可能错乱
- 别忘了在
matchMedia回调里同步更新按钮状态，否则旋转屏幕或缩放窗口时失效
hidden 和 display: none 混用会导致行为不可控
如果同时给按钮加了 hidden 属性又写了 .btn { display: none }，实际渲染以 hidden 为准，但 JS 修改 btn.hidden = false 后，display: none 仍生效——按钮还是看不见。这种叠加会让调试变得混乱。
- 选一种方案到底：要么全用
hidden+ JS 控制，要么全用类名（如.hidden-mobile）+ 媒体查询 - 用
hidden就别再写影响 display 的 CSS 规则，避免干扰 - 检查 DevTools 中元素是否真的被移出渲染树：有
hidden的元素在 Elements 面板里会标灰，且 computed 样式中display显示为none
hidden 对可访问性和 SEO 的影响不能忽略
hidden 是语义化隐藏，屏幕阅读器跳过、搜索引擎不索引——这在响应式按钮场景里常被误用。比如把小屏导航的“展开”按钮设为 hidden，键盘用户按 Tab 就永远触达不到它。
- 真正需要“完全不可见且不可交互”的才用
hidden；只是换位置或折叠，优先用visibility: hidden或opacity: 0+pointer-events: none - 若按钮在小屏下应被替代为汉堡菜单，原按钮就该用
hidden；若只是暂时收起（比如工具栏），用 class 切换更安全 - 用
aria-hidden="true"配合display: none比单独用hidden更可控，尤其当你要保留 DOM 结构做动画时
实际中最容易被忽略的是：hidden 不是 display 的快捷写法，它是独立的语义开关——开了就彻底退出渲染流，关了也不自动恢复原有 display 值（比如原本是 inline，关掉 hidden 后还是 inline，不是 block）。这点在按钮默认 display 类型和父容器布局约束下，经常导致对齐错位或换行异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
