使用Flexbox创建两栏布局，通过媒体查询在小屏下折叠侧栏；2. 可选择隐藏侧栏并添加按钮控制显隐，或改为上下堆叠布局；3. 根据内容重要性决定处理方式，确保移动端用户体验。
在响应式网页设计中，两栏布局（如主内容区+侧边栏）在大屏幕上并排显示，但在小屏幕设备上需要自动折叠，以提升可读性和用户体验。通过CSS媒体查询可以控制侧栏的隐藏与显示，实现自适应效果。
基本HTML结构
先构建一个简单的两栏布局结构：
<div class="container"><main class="main-content">主内容区</main>
<aside class="sidebar">侧边栏内容</aside>
</div>
CSS基础样式设置
使用Flexbox实现两栏并排布局：
.container {display: flex;
gap: 20px;
}
.main-content {
flex: 3;
}
.sidebar {
flex: 1;
background-color: #f0f0f0;
padding: 15px;
border-radius: 8px;
}
通过媒体查询控制侧栏折叠
当屏幕宽度小于768px时，让侧栏默认隐藏，并可通过按钮控制显示。以下是关键步骤：
立即学习“前端免费学习笔记（深入）”；
1. 小屏幕下隐藏侧栏 @media (max-width: 768px) {
.sidebar {
display: none;
}
} 2. 添加切换按钮（可选）
如果希望用户能手动展开侧栏，可添加一个按钮：
<button class="toggle-btn">显示侧栏</button> 3. 使用JavaScript控制显隐（增强交互） document.querySelector('.toggle-btn').addEventListener('click', function() {const sidebar = document.querySelector('.sidebar');
if (sidebar.style.display === 'block') {
sidebar.style.display = 'none';
this.textContent = '显示侧栏';
} else {
sidebar.style.display = 'block';
this.textContent = '隐藏侧栏';
}
}); 4. 响应式下侧栏全宽堆叠（替代方案）
不隐藏侧栏，而是改为上下堆叠布局：
@media (max-width: 768px) {.container {
flex-direction: column;
}
.sidebar {
display: block;
margin-top: 10px;
}
}
实际应用场景建议
根据内容重要性选择处理方式：
- 若侧栏为辅助信息（如广告、推荐），小屏下直接隐藏更简洁
- 若侧栏含导航或关键功能，建议保留并堆叠显示
- 对移动端优先项目，可默认隐藏+按钮触发，节省空间
基本上就这些。通过媒体查询配合display控制或布局变换，就能实现两栏布局的智能折叠，适配不同设备。关键是根据内容权重决定是隐藏还是重排。不复杂但容易忽略细节。
