斷點（Breakpoint）

什麼是斷點（Breakpoint）？

斷點（Breakpoint）是指在響應式網頁設計中，根據不同設備或屏幕尺寸，設置的特定寬度值。當屏幕大小達到或超過（或小於）這些斷點時，頁面的布局會根據設置的樣式進行調整。這使得網站在不同設備（如手機、平板、桌面等）上都能提供最佳的顯示效果。

斷點的原理

當用戶改變瀏覽器的寬度或使用不同的設備打開網頁時，媒體查詢會根據設定的條件來檢查當前的屏幕寬度，並根據這些寬度條件選擇性地應用CSS樣式。

這些條件通常是根據某些固定的寬度值來設置的，這些寬度值就叫做“斷點”。

常見的斷點

雖然沒有標準的斷點值，但通常有一些約定俗成的寬度範圍，這些範圍會根據不同設備的顯示需求來設置。

手機：小於 600px

用於小屏幕設備，如智能手機

例如：@media only screen and (max-width: 600px) { /* 樣式 */ }

平板：600px 到 768px

用於平板設備，無論是縱向還是橫向

例如：@media only screen and (max-width: 768px) { /* 樣式 */ }

桌面：768px 到 1024px

用於中型設備或較小的桌面顯示器

例如：@media only screen and (min-width: 768px) and (max-width: 1024px) { /* 樣式 */ }

大桌面：大於 1024px

用於大屏幕桌面設備或高清顯示器 例如：@media only screen and (min-width: 1024px) { /* 樣式 */ }

設置斷點的實際範例

假設我們想要設置一個響應式布局，對應不同的屏幕尺寸來調整列的數量，下面是一個例子：

/* 默認為桌面布局 */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

/* 手機屏幕下，設置所有列為100% */
@media only screen and (max-width: 600px) {
  [class*="col-"] {
    width: 100%;
  }
}

/* 平板屏幕下，設置每行最多顯示兩列 */
@media only screen and (max-width: 768px) {
  .col-6 { width: 50%; }
}

/* 大於1024px的桌面屏幕，保持原來的布局 */
@media only screen and (min-width: 1024px) {
  /* 桌面特定樣式可以保持不變或根據需求調整 */
}

斷點的選擇

選擇斷點的設置會依據網站的內容和需求有所不同。常見的做法是針對以下設備設置斷點：

手機（最大寬度 600px）

平板（最大寬度 768px）

小型桌面（最大寬度 1024px）

大型桌面（最小寬度 1024px）

每個斷點應根據你的網站設計來調整，目的是保證網站在不同設備上都能流暢顯示。