使用媒体查询收缩侧边栏宽度至60px并隐藏文字保留图标；2. 通过JavaScript控制抽屉式侧边栏的显示与隐藏，利用fixed定位和left偏移实现滑入滑出动画；3. 结合flex布局使内容区在侧边栏变化时自动调整占据剩余空间，确保小屏幕下良好用户体验。
在小屏幕设备上，响应式侧边栏通常需要从展开状态变为收缩状态，甚至隐藏或以抽屉形式展示。实现这一效果主要依赖 CSS 媒体查询和灵活的布局控制。以下是几种常见且实用的方法。
使用媒体查询自动收缩侧边栏
通过 @media 查询，在屏幕宽度较小时调整侧边栏宽度或将其隐藏。
例如：
.sidebar {
width: 250px;
transition: width 0.3s ease;
}
@media (max-width: 768px) {
.sidebar {
width: 60px; / 收缩为窄栏 /
}
}
这种做法适合保留部分图标导航。若只显示图标，可在 HTML 中配合伪元素或使用 font icons 显示简略信息。
立即学习“前端免费学习笔记（深入）”；
切换隐藏/显示（抽屉式侧边栏）
在移动端更常见的做法是将侧边栏默认隐藏，通过按钮（如汉堡菜单）触发显示。
关键思路：
- 初始状态下侧边栏 position: fixed 并移出屏幕（如 left: -250px）
- 添加一个类（如 .open）将其拉回可视区域
- 使用 JavaScript 控制类的切换
.sidebar {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background: #333;
transition: left 0.3s ease;
}
.sidebar.open {
left: 0;
}
JavaScript 示例：
document.querySelector('.toggle-btn').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('open');
});
使用 Flex 或 Grid 布局自适应内容区
当侧边栏收缩或隐藏时，主内容区应自动占满屏幕。
可结合 flex 布局实现：
.container {
display: flex;
}
.content {
flex: 1;
transition: margin-left 0.3s ease;
}
@media (max-width: 768px) {
.sidebar {
width: 60px;
}
.content {
margin-left: 60px;
}
}
基本上就这些。根据设计需求选择自动收缩、图标化，或完全隐藏并可展开的方式。核心是利用媒体查询与 CSS 过渡，让交互自然流畅。
