响应式侧边栏的核心不是简单地在小屏幕隐藏导航，而是让同一套结构在桌面端保持稳定可用，在移动端变成抽屉、下滑菜单或紧凑标签栏。CSS 可以在不依赖 JavaScript 的情况下完成大部分适配工作：用 Flexbox 建立主布局，用媒体查询切换侧边栏的定位方式和位移状态，再配合过渡动画让展开收起更自然。下面以常见的后台管理布局为例，拆解从基础结构到纯 CSS 抽屉交互的完整实现。
一、从语义化结构开始布局
侧边栏本质上是一个辅助导航区域，推荐使用 <aside> 或 <nav> 作为容器，主内容放在 <main> 中，外层再加一个 <div> 作为布局壳。这样的结构与屏幕尺寸无关，后续任何响应式变化都只作用在样式上，不需要改动 HTML。基础结构可以写成如下形式：
<div class="layout">
<aside class="sidebar">
<nav>
<ul>
<li>首页</li>
<li>博客</li>
<li>关于</li>
</ul>
</nav>
</aside>
<main class="content">
<h1>页面标题</h1>
<p>这里是主内容区域。</p>
</main>
</div>
布局壳使用 display: flex，让侧边栏和主内容在桌面端并排显示。侧边栏设置固定宽度或流式宽度，主内容通过 flex: 1 占满剩余空间。同时给侧边栏加过渡属性，为后面的抽屉动画预留。样式虽然简单，但它是整个响应式行为的基础：
.layout {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 260px;
background: #1f2937;
color: #ffffff;
padding: 20px;
transition: transform 0.25s ease;
}
.content {
flex: 1;
padding: 24px;
}
需要特别注意，默认情况下 Flex 容器的子项不会换行，小屏幕上如果继续使用 260px 固定宽度，主内容会被压缩到只剩很小一块。因此下一步就是设置断点，在小屏幕下把侧边栏从正常文档流中移除，改为固定定位抽屉。这个切换不依赖额外插件，只靠媒体查询就能完成。
二、用媒体查询切换为抽屉侧边栏
当视口宽度低于 768px 时，布局壳不再适合 Flex 并排，可以改为 display: block；侧边栏改为 position: fixed，高度铺满视口，并通过 transform: translateX(-100%) 先移出屏幕。主内容自然回到块级布局，占满整行。注意 transform 只做视觉位移，元素仍保留原有渲染位置，但固定定位已经脱离文档流，因此不会挤压内容。
@media (max-width: 768px) {
.layout {
display: block;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 280px;
transform: translateX(-100%);
z-index: 20;
}
.sidebar.is-open {
transform: translateX(0);
}
.mask {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 10;
}
.mask.is-visible {
display: block;
}
}
打开状态可以通过给侧边栏添加一个 .is-open 类实现。这个类在移动端把 transform 恢复为 translateX(0)。同时还需要一层遮罩，避免用户误触主内容，也提供关闭抽屉的点击区域。遮罩默认隐藏，打开时显示。以上逻辑如果用 JavaScript，只需在菜单按钮点击时切换两个类；如果不想依赖脚本，也可以用下一节的 checkbox 方案。
过渡动画让抽屉滑动更平滑，但也带来移动端性能考量。对于抽屉这种只涉及 transform 和 opacity 的动画，浏览器可以在合成层完成，不会频繁触发重排。遮罩更适合使用 opacity 配合 visibility，而不是直接切换 display，否则动画无法平滑过渡。如果对性能要求较高，可以给 .sidebar 增加 will-change: transform，但不要滥用，以免占用过多内存。
三、纯 CSS 实现汉堡按钮与遮罩
无 JavaScript 的响应式侧边栏，核心思路是把一个隐藏的 <input type="checkbox"> 放在布局前面，让 <label> 充当汉堡按钮。再利用 CSS 兄弟选择器，当 checkbox 被选中时控制后面相邻的侧边栏和遮罩。HTML 结构要求 input、侧边栏和遮罩处于同一个父级，且 input 必须在它们前面，这样 ~ 选择器才能生效。
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<label for="nav-toggle" class="nav-toggle-label">菜单</label>
<aside class="sidebar">
<nav>
<ul>
<li>首页</li>
<li>博客</li>
<li>关于</li>
</ul>
</nav>
</aside>
<label for="nav-toggle" class="nav-mask"></label>
默认情况下，汉堡按钮在桌面端隐藏，在移动端显示。checkbox 本身通过 opacity 和 pointer-events 隐藏，但保留可聚焦性。选中后使用 .nav-toggle:checked ~ .sidebar 把侧边栏拉回视口，用 .nav-toggle:checked ~ .nav-mask 显示遮罩。点击遮罩时由于 <label for> 指向同一个 checkbox，可以取消选中，实现点击遮罩关闭。
.nav-toggle {
position: absolute;
opacity: 0;
pointer-events: none;
}
.nav-toggle-label {
display: none;
padding: 10px 12px;
background: #1f2937;
color: #ffffff;
cursor: pointer;
}
@media (max-width: 768px) {
.nav-toggle-label {
display: inline-flex;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 280px;
transform: translateX(-100%);
transition: transform 0.25s ease;
z-index: 20;
}
.nav-toggle:checked ~ .sidebar {
transform: translateX(0);
}
.nav-mask {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 10;
}
.nav-toggle:checked ~ .nav-mask {
display: block;
}
}
这种方案的优点是零 JavaScript 依赖，适合静态站点、文档站或轻量后台。但也要清楚它的限制：所有交互状态都绑定在 checkbox 上，无法方便地管理焦点、按 Esc 关闭、或记住用户展开状态。而且屏幕阅读器对这类自定义开关的理解有限，建议同时在 label 上补充 aria-label 或在 checkbox 上设置对应角色，必要时还是用少量 JavaScript 增强可访问性。
四、让宽度流动起来并处理可访问性
除了在固定宽度和抽屉之间切换，侧边栏宽度也可以使用 clamp() 实现流式变化。比如宽屏下侧边栏占视口宽度的 22%，但限制在 220px 到 320px 之间，这样在平板和笔记本之间不会显得过大或过窄。移动端抽屉打开时则可以用 max-width 或 min() 控制，避免小屏上抽屉占满整个屏幕。
.sidebar {
width: clamp(220px, 22vw, 320px);
}
@media (max-width: 768px) {
.sidebar {
width: min(85vw, 320px);
}
}
可访问性不应放到最后才补。对于动画敏感用户，可以检测 prefers-reduced-motion，关闭或缩短过渡。对于键盘用户，汉堡按钮需要清晰的 focus-visible 样式。侧边栏内导航项也要保证在抽屉打开时可被 Tab 聚焦。纯 CSS 方案虽然能完成展示，但焦点管理仍需要脚本支持，例如抽屉关闭时把焦点还给菜单按钮，打开时聚焦第一个导航项。
@media (prefers-reduced-motion: reduce) {
.sidebar,
.nav-mask {
transition: none;
}
}
.nav-toggle:focus-visible + .nav-toggle-label {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
除此之外，小屏下的横向溢出也是常见问题。当抽屉宽度为 280px 加 padding 时，如果盒模型不是 border-box，实际宽度会超过预期。建议在项目根样式中统一设置 box-sizing: border-box，减少响应式计算误差。通过 CSS 实现响应式侧边栏并不意味着否定 JavaScript，而是把样式职责还给 CSS，让 JavaScript 只负责状态、焦点和辅助功能，这样的组合更容易维护。