如何使用 CSS 斷點創建響應式設計

網站的成功很大程度上取決於用戶體驗。 如今，用戶從許多不同的設備訪問網站，並且在每個設備上提供平等的用戶體驗可能是一個挑戰。 這就是 CSS 斷點可以派上用場的地方。

CSS 斷點對於創建可在任何設備上提供出色用戶體驗的響應式網站非常有益，但它們仍然是網頁設計中更令人困惑的方面之一，尤其是對於新開發人員而言。

讓我們開始吧！

什麼是 CSS 斷點？

CSS 斷點是網站內容根據設備寬度響應的點，允許您向用戶顯示最佳佈局。

CSS 斷點也稱為媒體查詢斷點，因為它們與媒體查詢一起使用。

在此示例中，您可以看到佈局如何適應屏幕尺寸。 大分辨率的佈局有一個標題和兩列正文佈局，但在小型設備中它變成一列佈局。

如何設置 CSS 斷點

棘手的部分是自己決定斷點。 沒有任何標準模板，不同的框架使用不同的斷點。

那麼你應該為你的斷點採用什麼方法呢？

有兩種可能的方法可以遵循：

• 基於設備的斷點
• 基於內容的斷點

基於設備的 CSS 斷點

根據不同的設備決定斷點聽起來是個好主意，但實際上，它並不總是最好的方法。 我們已經有足夠多的設備需要擔心，當一個新的設備以不同的寬度出現時，回到你的 CSS 並重新添加一個新的斷點是非常耗時的。

儘管如此，它仍然是一個可行的選擇，因為您可能會發現這對您來說沒問題。 以下是特定於設備的斷點的示例：

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

使用這種方法，您最終將擁有大量媒體查詢。

基於內容的 CSS 斷點

決定斷點的理想選擇是基於您網站的內容。 此方法允許您在內容需要佈局調整的地方簡單地添加斷點。 這將使您的媒體查詢更加簡單和易於管理。

此斷點意味著當設備寬度為 768 像素及以上時，將應用 CSS。

 [css]@media only screen (min-width: 768px){ ... }[/css]

您還可以設置帶有斷點的範圍，因此 CSS 將僅在這些限制內應用。

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

何時使用最小或最大寬度 CSS 斷點

您可以使用min-width 、 max-width以不同的方式設置斷點，甚至可以將兩者結合使用。 但問題是，你應該什麼時候使用每一個？

以簡單的方式回答它，如果您正在使用移動優先的方法設計佈局，那麼使用最小寬度斷點並按照您的方式進行操作。

為小型設備設置默認樣式，並相應地調整大型設備。

同樣，如果您首先為較大的設備進行設計，請像往常一樣設置默認 CSS，並使用 max-width 方法針對較小的設備進行調整。

在 SASS 中使用 CSS 斷點

如果您使用的是 SASS 或 SCSS 之類的預處理器，則可以編寫更智能的斷點。 Mixin 允許您創建更多要記住的聲明性斷點，如下所示：

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

在小組中工作時，記住“tablet-up”比 768px 或 48em 容易得多。 任何人都可以理解這個斷點； 它適用於平板電腦及以上屏幕尺寸。

使用哪些 CSS 斷點

我們已經了解瞭如何使用斷點以及何時使用它們，但問題仍然存在：您應該使用哪些特定的斷點？

讓我們把事情分解一下。 您需要定位台式機、平板電腦和僅限移動設備的尺寸。 您可以查看一些流行的框架，以了解要遵循的方法。

Bootstrap 在 576px、768px、992px 和 1200px 處有斷點。 Foundation 主要在 40em 和 64em 有斷點。 在 Bulma，斷點設置為 768px、769px、1024px、1216px 和 1408px。

每個都有不同的斷點，但它們的共同點是移動優先方法。 您可以使用這些斷點之一作為起點，也可以提出自己的斷點，如下所示：

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

你明白了！

包起來

總而言之，CSS 斷點是重構佈局以提供跨不同設備的最佳用戶體驗的好方法。

始終嘗試根據您自己的內容而不是設備創建斷點。 將它們分解為邏輯寬度而不是隨機寬度，並將它們保持為可管理的數字，因此修改仍然簡單明了。

你為你的佈局使用了哪些 CSS 斷點？ 請在下面的評論部分告訴我們。

下一步是什麼？

使用 Local 免費創建和測試您的自定義 Gutenberg 塊！

在此處了解有關本地的更多信息！

有關構建響應式網站的更多建議，請查看這些文章！

• 如何使您的 WordPress 網站適合移動設備
• 如何在 WordPress 中創建響應式導航菜單
• 響應式網頁設計的 7 個最佳實踐技巧