反應 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以及第二種情況的建議。

如果我滿足您的要求，請告訴我。