什麼是 bootstrap 中的 break point

斷點是 Bootstrap 中的觸發器，用於觸釋出局響應按照裝置或視口大小的變化而變化。

斷點是響應式設計的基石。使用它們來控制您的佈局何時可以適應特定的視口或裝置大小。

使用 media query 透過斷點來構建你的 CSS。媒體查詢是 CSS 的一項功能，它允許您根據一組瀏覽器和作業系統引數有條件地應用樣式。我們最常在媒體查詢中使用 min-width。

移動優先，響應式設計是我們需要達到的目標。
Bootstrap 的 CSS 旨在應用最少的樣式來使佈局在最小的斷點處工作，然後對樣式進行分層以針對更大的裝置調整該設計。這可以最佳化您的 CSS，縮短渲染時間，併為您的訪問者提供出色的體驗。

Bootstrap 包括六個預設斷點，有時稱為 grid layers，用於響應式構建。如果您使用我們的源 Sass 檔案，可以自定義這些斷點。

bootstrap 裡預設的 media query：

每個斷點大小被選擇為 12 的倍數，並代表常見裝置大小和視口尺寸的子集。它們並不專門針對每個用例或裝置，但提供範圍為構建響應式應用提供了強大且一致的基礎。

Media queries

由於 Bootstrap 是採取了 modile first 的設計方針，因此我們使用一些媒體查詢來為我們的佈局和介面建立合理的斷點。這些斷點主要基於最小視口(minimum viewport)寬度，並允許我們隨著視口的變化放大元素。

下面這段程式碼的語義是：

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

在預設的螢幕尺寸即 x-small，min-width: 0 的情況下，隱藏具有 custom-class 的 DOM 元素。但是，在 sm 以及更大尺寸的螢幕上，使用 display:block 來顯示。

同樣，下列程式碼的語義：

%cx-product-facet-navigation {
  min-width: 0;

  // hides the filter button in desktop experience
  @include media-breakpoint-up(lg) {
    button.dialog-trigger {
      display: none;
    }
  }
}

在 lg breakpoint 代表的螢幕尺寸上，將具有 dialog-trigger 的 button 按鈕隱藏掉。

更多Jerry的原創文章，盡在："汪子熙":

什麼是 bootstrap 中的 break point

Media queries

相關文章