答案：通过HTML结构搭建侧边栏与主内容区，利用flex布局设置固定与自适应宽度，结合transform实现平滑动画，JavaScript控制collapsed类切换状态，配合@media query在小屏下默认隐藏侧边栏并添加遮罩层优化交互体验。
实现一个响应式可折叠的侧边栏，核心是结合 CSS 的
@media query
判断屏幕尺寸，配合
transform
实现平滑动画效果。整个流程不复杂，关键在于结构清晰和状态管理。
1. 布局结构与基础样式
先搭建基本 HTML 结构，包含一个侧边栏和主内容区域：
给侧边栏固定宽度，主内容自适应，使用 flex 布局：
2. 添加折叠状态与按钮控制
通过 JavaScript 给 body 或 sidebar 添加类名（如
collapsed
）来表示折叠状态：
立即学习
“
前端免费学习笔记（深入）
”；
用 transform 将侧边栏移出可视区域：
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
此时侧边栏会平滑滑出，点击按钮再滑回，动画由 transition 控制。
3. 使用 Media Query 自适应小屏
在移动端默认折叠侧边栏，用户点击再展开：
这样在小屏幕上，侧边栏默认隐藏，点击按钮后出现，不影响主内容布局。
4. 优化细节提升体验
添加遮罩层：小屏展开时，在主内容上加半透明遮罩，点击可收起菜单
过渡时间设为 0.3s 左右，太长会卡顿，太短不明显
确保 toggle 按钮在小屏始终可见
侧边栏使用 position: fixed 避免滚动错位
基本上就这些。关键是利用 transform 移动元素而不影响文档流，搭配 media query 区分设备行为，再用 JS 控制类名切换状态。不复杂但容易忽略细节。
主内容区
.layout {
display: flex;
}
.sidebar {
width: 250px;
background: #333;
color: white;
height: 100vh;
transition: transform 0.3s ease;
}
.main-content {
flex: 1;
padding: 20px;
}
document.querySelector('.toggle-btn').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('collapsed');
});
.sidebar.collapsed {
transform: translateX(-250px);
}
@media (max-width: 768px) {
.sidebar {
position: fixed;
z-index: 100;
}
.sidebar:not(.collapsed) {
transform: translateX(0);
}
.sidebar.collapsed {
transform: translateX(-250px);
}
.main-content {
margin-left: 0;
}
}