能需用 display 配合交互逻辑仅设 display: none 会移出渲染树导致点击无响应应通过 JS 切换 display 值并同步 aria-expanded 属性兼顾可访问性与动画过渡。移动端导航菜单隐藏后还能点开吗能但得靠 display 配合交互逻辑不能只设 display: none 就完事。很多同学一上来就把菜单容器直接 display: none结果点击按钮没反应——因为元素被彻底移出渲染树事件监听器也收不到触发。正确做法是默认用 display: none 隐藏但点击按钮时切换为 display: block或 flex同时确保 JS 绑定的是按钮本身不是被隐藏的菜单如果用 CSS 动画过渡display 无法做动画得搭配 visibility opacity 或 max-height 等可过渡属性注意 Safari 在某些旧版本中对 display: contents 的支持不一致别误用它来“隐藏又保留交互”Media Queries 断点设多少才靠谱别硬套 768px 或 992px。真实项目里断点应该由内容撑开决定而不是设备尺寸。常见错误写 media (max-width: 768px)结果平板横屏1024×600下菜单依然折叠体验割裂推荐做法用 min-width 内容自适应比如导航项换行前的临界宽度用浏览器调试器拖动窗口观察布局断裂点若必须用固定值优先考虑 480px老安卓、768pxiPad 竖屏、1024pxiPad 横屏三个层级但只在它们真正影响布局时才加display: none 和 visibility: hidden 选哪个绝大多数情况选 display: none只有需要保留占位或维持焦点状态时才考虑 visibility: hidden。 WisPaper 复旦大学研发的AI学术搜索工具5分钟内筛选1000篇论文