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

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

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

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

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

bootstrap 裡預設的 media query：
![](https://img-blog.csdnimg.cn/img_convert/4fbaae9e032874563922a948417992f6.png)

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

# Media queries

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

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

```css
// 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 來顯示。

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

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

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

```

![](https://img-blog.csdnimg.cn/img_convert/b680c72f4698d58de754b58fe8d32aa0.png)

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

什麼是 bootstrap 中的 break point

相關文章