反应 css 侧边栏不会关闭小 window 尺寸

Question

赏金将在 5 小时后到期。 此问题的答案有资格获得+50声望赏金。 Martin正在从有信誉的来源寻找答案。

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

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

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

我的侧边栏展开/折叠逻辑是纯 css，如果 window 太小（侧边栏颜色 = 红色），我希望我的侧边栏折叠，我可以添加 a.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，如果用户正在查看桌面显示器尺寸的页面，我可以让我的侧边栏开始扩展？ 但是对于较小的浏览器 windows （例如移动设备）保持侧边栏隐藏

Answer 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)*

}

Answer 2

您希望输入的:checked值来控制侧边栏的当前扩展 state。

但是，与此同时，您希望视口的大小来确定侧边栏的 state。

坏消息是您不能单独使用 CSS 更改或设置复选框的值。

好消息是您可以使用 JavaScript 来做到这一点。 您可以将其链接到媒体查询。

以下是在 React 中的操作方法：

  // define media query:
  const mediaQuery = window.matchMedia("(min-width: 42rem)");

  // track query state (if it applies or not)
  const [query, setQuery] = React.useState(mediaQuery);

  // keep query state updated (+ cleanup)
  React.useEffect(() => {
    mediaQuery.addListener(setQuery);
    return () => mediaQuery.removeListener(setQuery);
  }, [mediaQuery]);

  // track sidebar expanded state
  const [expanded, setExpanded] = React.useState(query.matches);

  // update checkbox value when the query state changes
  React.useEffect(() => {
    setExpanded(query.matches);
  }, [query]);

  // everything else stays the same 
  // (except binding the expanded state to the checkbox)

看到它工作： https://jsfiddle.net/websiter/td9rgcpq/

Answer 3

当我研究我的答案时，我意识到这些要求对我来说并不明确。

你想在大屏幕上有什么？ 我可以想到两种不同的选择。

1. 打开页面时，侧边栏不显示。 相反，当您按下切换按钮时，它会显示为 animation。
2. 打开页面时侧边栏可见，按下切换按钮时侧边栏消失。 它是否应该在页面加载时与 animation 一起出现？

在这两种情况下，您都不希望小屏幕上出现侧边栏。

我仍然不明白以下要求。

如果用户在桌面显示器尺寸上查看页面，我可以让我的侧边栏开始扩展吗？

当用户在大屏幕上打开页面时，它应该是什么样子？ 大屏侧边栏的初始state是什么？ 您希望边栏在页面加载时以 animation 打开吗？

无论如何，请在下面找到我的建议。

大意

当他们选中#sidebar-checkbox复选框时，侧边栏变得可见。 我建议将此行为限制在足够大的屏幕上。 换句话说，我们将复选框 state 与侧边栏可见性绑定仅适用于大屏幕。

在小屏幕上，侧边栏总是隐藏的，因为我们将规则放在大屏幕的媒体查询下。

1.最初隐藏但切换时出现

代码不言自明。

@media (min-width: 30em) {
  #sidebar-checkbox:checked + .sidebar {
    z-index: 10;
    visibility: visible;
  }

  #sidebar-checkbox:checked ~ .sidebar, #sidebar-checkbox:checked ~ .wrap, #sidebar-checkbox:checked ~ .sidebar-toggle {
  -webkit-transform: translateX(0rem);
      -ms-transform: translateX(0rem);
          transform: translateX(0rem);
  }

  #sidebar-checkbox:checked ~ .wrap {
  -webkit-transform: translateX(14rem);
      -ms-transform: translateX(14rem);
          transform: translateX(14rem);
  }
}

我认为我们还应该仅在大屏幕上显示复选框的 label。 但我不想过多地打扰您的 styles 并尝试进行最小的工作更改。

2.最初在大屏幕上显示

我们必须用:not(:checked)选择器替换:checked选择器。 在这种情况下，侧边栏默认在大屏幕上可见。

我们还可以显示 animation 在页面加载时侧边栏从左向右滑动。 您可能会在“css3 transition animation on load?”问题的答案中找到一些解释。

请检查更新的 JSFiddle以及第二种情况的建议。

如果我满足您的要求，请告诉我。