display: none 配合媒体查询是最可靠的隐藏方式，需移动优先、避免内联样式覆盖、注意动画兼容性及无障碍支持。
用 display: none 配合媒体查询是隐藏响应式模板中多余元素最可靠的方式——它真正移出渲染流，不占空间、不触发重排、屏幕阅读器默认跳过。别用 visibility: hidden 或 opacity: 0 替代，那只是“假装看不见”，小屏下主内容会被挤偏、留白、甚至焦点穿透。
为什么不能只靠断点写 .sidebar { display: none; }
常见错误是只在媒体查询里加隐藏规则，却没设默认状态。比如只写 @media (max-width: 768px) { .sidebar { display: none; } }，但没管桌面端原始样式。一旦 UI 库或 CSS 重置把 .sidebar 默认设为 flex 或 inline-block，断点就可能失效。
- 移动优先写法更稳：
.sidebar { display: none; }先默认隐藏，再用@media (min-width: 769px) { .sidebar { display: block; } }显式恢复桌面端显示 - 断点值别硬写
768px：iPad 竖屏刚好卡边界，横屏安卓平板可能超800px却仍是触屏设备；更稳妥的是加能力判断，例如@media (max-width: 767px) and (pointer: coarse) -
max-device-width已基本被现代浏览器忽略，DevTools 模拟器返回值也不可靠，统一用width
display: none 在 JS 切换时容易踩哪些坑
直接操作 element.style.display = 'none' 看似简单，但极易覆盖原始样式逻辑，尤其当元素原本由 class 控制（如 .is-hidden { display: none; }）时，后续恢复会出错。
- 优先用
el.classList.toggle('d-none')，避免内联样式污染原始display值（比如从inline-flex错误回退成block） - 父元素设了
display: none，子元素无法通过display: block恢复显示——这是渲染树层面的硬切断，不是继承问题 - 隐藏后立即调用
getBoundingClientRect()会返回全0，而visibility: hidden下仍返回真实尺寸，JS 测量逻辑必须提前适配 - 若侧边栏含第三方脚本（如统计 iframe、自动播放
<video></video>），display: none不会暂停它们，需手动销毁或暂停
侧边栏要滑入动画，还能用 display: none 吗
不能。动画需要 DOM 持续存在且参与布局计算，display: none 会让元素瞬间退出渲染树，transition 完全无效。这时候得换方案。
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translateX(-100%)初始隐藏，配合transition: transform 0.3s ease-out实现滑入——性能好、不触发重排 - 必须设
position: fixed或absolute，否则transform不脱离文档流，主内容区仍被挤压 - 别用
left: -280px替代translateX()：前者触发重排，后者走合成层，更流畅 - 唤出后建议给
加overflow: hidden，防止页面滚动干扰 - 点击外部关闭时，记得在菜单容器内所有可点击元素上统一调用
e.stopPropagation()，否则点菜单自己也会触发全局关闭
真正麻烦的从来不是“怎么藏”，而是藏完之后：DOM 还在不在？焦点还进不进？读屏器还读不读？JS 还测不测得到？这些细节不处理，display: none 就只是个开头，不是终点。
