React纯CSS侧边栏适配：大屏默认展开，小屏默认折叠

我有一个纯CSS实现展开/折叠动画的React侧边栏，动画效果符合预期，但页面默认加载时侧边栏始终处于收起状态。目前通过CSS媒体查询设置了不同屏幕尺寸下的侧边栏样式：

• 当窗口尺寸较大（min-width:30em）时，侧边栏为黄色
• 当窗口尺寸较小（max-width:31em）时，侧边栏为红色

由于侧边栏的展开/折叠逻辑完全由CSS实现，我希望仅通过CSS实现：桌面等大屏设备下侧边栏默认展开，移动端等小屏设备下侧边栏默认折叠，请问如何在小屏的媒体查询中添加样式实现默认折叠？

当前CSS代码 #

/* ----------------------
@media queries
 ---------------------- */

/* if screen is big: show sidebar */
@media (min-width: 30em) {
  .sidebar {
    background:yellow;
    color:yellow;
  }
}

/* if screen is too small: hide sidebar */
@media (max-width: 31em) {
  .sidebar {
  background:red;
  color:red;
  }
  /* add something here to toggle sidebar as hidden */
}

解决方案 #

核心思路是通过媒体查询直接覆盖不同屏幕下侧边栏的默认状态，同时保留原有的CSS触发展开/折叠的交互逻辑（比如基于checkbox的toggle）。

假设你的侧边栏是通过宽度/位移+过渡动画实现收起/展开的（纯CSS侧边栏的常见实现方式），可以按以下方式修改CSS：

/* 基础样式：默认收起侧边栏，添加过渡动画 */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transition: all 0.3s ease;
  /* 默认收起状态 */
  width: 0;
  transform: translateX(-100%);
  overflow: hidden;
}

/* ----------------------
@media queries
 ---------------------- */

/* 大屏设备：强制展开侧边栏，隐藏toggle按钮（可选） */
@media (min-width: 30em) {
  .sidebar {
    background: yellow;
    color: yellow;
    /* 覆盖默认收起样式，设置展开状态 */
    width: 250px; /* 替换为你需要的侧边栏宽度 */
    transform: translateX(0);
  }
  
  /* 如果有toggle按钮，大屏下可以隐藏它 */
  .toggle-label {
    display: none;
  }
}

/* 小屏设备：保持默认收起，保留toggle交互 */
@media (max-width: 31em) {
  .sidebar {
    background: red;
    color: red;
    /* 确认默认收起状态 */
    width: 0;
    transform: translateX(-100%);
  }
  
  /* 当toggle被触发时（比如点击checkbox对应的label），展开侧边栏 */
  .toggle:checked ~ .sidebar {
    width: 250px;
    transform: translateX(0);
  }
}

关键说明 #

1. 基础样式设置默认收起：在媒体查询之外的基础样式中，先定义侧边栏的默认收起状态（比如宽度0、位移出视野），并添加过渡动画保证展开/折叠的平滑效果。
2. 大屏媒体查询强制展开：在min-width:30em的规则中，直接覆盖基础样式的收起属性，设置侧边栏为展开状态，同时可以隐藏小屏才需要的toggle按钮。
3. 小屏媒体查询保留交互：在max-width:31em的规则中，确认侧边栏的默认收起状态，同时保留原有的CSS触发逻辑（比如:checked选择器），让用户可以通过toggle按钮展开侧边栏。

如果你的侧边栏是通过其他CSS逻辑实现的（比如height控制），只需要对应修改媒体查询中覆盖的属性即可，核心逻辑一致。

内容的提问来源于stack exchange，提问作者Martin