如何在CSS中实现响应式侧边导航_使用媒体查询和Flexbox调整侧栏宽度

首先使用Flexbox创建弹性布局，侧边栏固定宽度，主内容区自适应；然后通过媒体查询在屏幕小于768px时缩小侧边栏至80px；最后添加过渡动画和可切换类实现移动端交互，完成响应式侧边导航。

在现代网页设计中，响应式侧边导航是常见需求。通过结合CSS媒体查询和Flexbox布局，可以轻松实现一个在不同设备上自动调整宽度的侧边栏。

使用Flexbox构建基础布局

页面主体采用Flexbox可以让侧边栏和内容区灵活分配空间。将容器设为display: flex，侧边栏设置固定宽度（如250px），主内容区占据剩余空间。

• 父容器使用display: flex开启弹性布局
• 侧边栏设置flex: 0 0 250px防止缩放并保持初始宽度
• 主内容区使用flex: 1自动填充剩余区域

示例代码：

.container {
  display: flex;
}
.sidebar {
  flex: 0 0 250px;
  background-color: #333;
}
.main-content {
  flex: 1;
  padding: 20px;
}

用媒体查询适配小屏幕

当屏幕变窄时，可以通过媒体查询调整侧边栏行为。例如，在小于768px的设备上将其宽度缩小或隐藏，提升移动端体验。

• 设置断点，如@media (max-width: 768px)
• 将侧边栏宽度改为更小值（如80px）或完全隐藏
• 可配合transform实现滑动效果，或添加按钮控制显隐

响应式调整示例：

@media (max-width: 768px) {
  .sidebar {
    flex: 0 0 80px;
  }
  .main-content {
    padding: 15px;
  }
}

增强交互性：可切换的侧边栏

在移动端，常需要点击按钮展开或收起侧边栏。可通过CSS类切换实现，无需JavaScript也可用:target伪类简单控制。

• 定义一个.collapsed类，将侧边栏宽度设为0或极小值
• 使用JavaScript添加/移除类，或利用锚点链接触发:target
• 加上transition实现平滑动画效果

添加过渡动画：

.sidebar {
  transition: flex 0.3s ease;
} 基本上就这些。用Flexbox控制结构，媒体查询适配尺寸，再加一点交互细节，就能做出实用的响应式侧边导航。关键是合理设置断点和灵活运用弹性布局特性。