最稳妥做法是用CSS媒体查询配合display: none隐藏侧边栏，使其彻底退出布局流；推荐断点用min-width: 48em而非固定像素，需确保HTML语义结构合理、避免JS强制操作DOM。
侧边栏在小屏幕上消失，但不是靠 JavaScript 强制删 DOM
直接用 CSS 媒体查询控制 display 或 visibility 是最稳妥的做法。硬用 JS 监听 window.resize 再操作 document.getElementById 删除或添加元素，容易触发重排、错过首次渲染、且 SSR 不友好。
关键不是“隐藏”，而是“不参与布局”——所以优先选 display: none，而不是 visibility: hidden（后者仍占位）。
-
display: none在移动端断点下生效，侧边栏彻底退出流式布局，主内容自动撑满 - 断点值别写死成
768px，改用min-width: 48em更可靠（em 基于用户字号，兼容缩放） - 如果侧边栏含
position: fixed或absolute，得额外加display: none到对应选择器，否则媒体查询可能不生效
HTML 结构必须支持语义化响应式切换
不要把侧边栏塞进 <div id="sidebar"> 然后靠 JS 搞“显示/隐藏按钮”。浏览器原生的 <nav> + <main> 结构，配合 CSS 的 grid-template-areas 或 flex 顺序控制，才能让屏幕阅读器和搜索引擎正确理解布局变化。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<body>
<header>...</header>
<div class="layout">
<nav class="sidebar">...</nav>
<main class="content">...</main>
</div>
<footer>...</footer>
</body>
-
.layout设为display: grid，用grid-template-columns: 250px 1fr控制桌面布局 - 媒体查询里改成
grid-template-columns: 1fr，再配grid-template-areas: "content"，同时给.sidebar加display: none - 避免用
float或绝对定位做侧边栏——它们无法被媒体查询优雅接管
点击按钮展开隐藏的侧边栏时，别用 innerHTML 动态插入 HTML
用户缩放窗口或切到平板横屏时，已展开的侧边栏可能卡在半透明遮罩层后面、焦点丢失、或滚动错位。根本原因是 DOM 节点被销毁重建，事件监听器和表单状态全丢。
正确做法是：初始 HTML 就包含侧边栏，仅用 CSS 控制显隐 + 过渡动画：
- 给
.sidebar加transform: translateX(-100%)和transition: transform 0.3s ease - 点击按钮时只切换一个类名，比如
.sidebar.open→transform: translateX(0) - 遮罩层用独立
<div class="overlay">，同样靠类名控制opacity和visibility，不依赖 JS 插入 - 记得加
aria-expanded="false"和aria-controls="sidebar-id"，键盘用户 Tab 到按钮时能感知状态
测试时最容易漏掉的三个真实场景
光看 Chrome DevTools 的响应式模式不够。真机上常出问题的点很具体：
- iOS Safari 下，
vh单位在地址栏收起/展开时会跳变，侧边栏高度若依赖100vh，可能突然截断——改用100dvh（如果支持）或min-height: 100%配合html, body { height: 100% } - 安卓微信内置浏览器对
transform+will-change组合有渲染 bug，侧边栏滑入时闪白——去掉will-change: transform，或只在:hover或.open时加 - 用户强制放大文字（系统设置 > 显示 > 字体大小拉到最大），
em断点可能失效——补一条@media (max-device-width: 480px)保底
侧边栏是否“自动隐藏”，本质是布局逻辑是否脱离 JS 干预。CSS 控制边界，HTML 提供语义骨架，JS 只管交互反馈——这三者没拧着，才不会在某个安卓旧版或 Safari 特定版本里突然失灵。
