反应 css 侧边栏不会关闭小窗口大小答案

【问题标题】：react css sidebar wont close for small window size反应 css 侧边栏不会关闭小窗口大小
【发布时间】：2022-08-02 12:36:48
【问题描述】：

我有一个带有纯 css 的反应侧边栏，用于我非常喜欢的展开/折叠动画。除了默认情况下，每次我在这种情况下打开我的页面/jsfiddle时，侧边栏都会默认关闭。

https://jsfiddle.net/martinradio/x1dz80a6/2/

我已经在我的 css 文件中收集了所有 @media 查询，并对其进行了更改，因此当窗口很大时，侧边栏变为黄色。如果窗口变小，侧边栏将变为红色。

我的侧边栏展开/折叠逻辑是纯 css，如果窗口太小（侧边栏颜色 = 红色），我希望我的侧边栏折叠，我可以添加一个 .sidebar 值来折叠侧边栏吗？


/* ----------------------
@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 higgen */
}

有没有办法通过添加css，如果用户正在查看桌面显示器尺寸的页面，我可以让我的侧边栏开始扩展？但是对于较小的浏览器窗口（例如移动设备），请隐藏侧边栏

您当然可以使用媒体查询来做到这一点。使用 React，您可以有条件地添加一个类来根据用户代理屏幕大小切换侧边栏菜单
编辑了我的问题，我已经能够添加这些@media 查询来更改侧边栏颜色，所以我知道它的工作原理。但我无法弄清楚要添加什么 css 逻辑以使侧边栏崩溃

标签： javascript html css reactjs browser-width

【解决方案1】：

您可以使用 CSS 媒体查询来根据屏幕大小确定要执行的操作。在这里，您可能希望根据屏幕大小更改侧边栏的行为。

@media (max-width: 600px) { 

*This is for phones, for example (you might need to find more accurate pixel counts)*

}

@media (min-width: 601px) { 

*This is for laptops, for example (you might need to find more accurate pixel counts)*

}

【讨论】：

我会在括号内添加什么？我可以告诉它更改类的 css 属性值吗？比如@media (max-width: 600px) { .sidebar-visible: visibile:none }不确定如何在我的反应jsfiddle中实现媒体查询
编辑了我的问题，我已经能够添加这些@media 查询来更改侧边栏颜色，所以我知道它的工作原理。但我无法弄清楚要添加什么 css 逻辑以使侧边栏崩溃