初學者指南：CSS RWD 常見的斷點介紹

更新日期： 2024 年 11 月 5 日

在設計響應式網頁（Responsive Web Design, RWD）時，斷點是用來控制頁面在不同裝置上的顯示效果。

透過不同的斷點，我們可以針對手機、平板、筆電、桌機等不同設備，為每一種尺寸的螢幕設計專屬的樣式。

本文將介紹常見的 RWD 斷點，以及這些斷點如何應用於各類裝置，幫助您設計出更適合多裝置的網站。

什麼是 RWD 斷點？

RWD 斷點（Breakpoints） 是指根據裝置螢幕寬度，來調整頁面樣式的分界點。

當頁面寬度達到或超過這些設定的斷點時，CSS 的媒體查詢（Media Queries）就會套用不同的樣式，讓網站在不同裝置上顯示最佳的效果。

一般我們會針對不同裝置的常見螢幕寬度來設置斷點，讓設計自動適應手機、平板、桌機等各類螢幕。

常見的 RWD 斷點設置

以下是響應式網頁設計中常見的 RWD 斷點分類：

手機（Mobile）：小於 768px

針對手機裝置，我們通常設定寬度為 768px 以下 的斷點，這包含了大多數的手機螢幕。

此時頁面內容會以單欄顯示，字體、按鈕和圖片會縮小，並調整為適合小螢幕閱讀的樣式。

@media (max-width: 768px) {
  /* 手機樣式 */
}

平板直立（Tablet Portrait）：768px – 1023px

當螢幕寬度為 768px 到 1023px 之間時，通常針對平板裝置的直立顯示進行設計。

這些裝置的螢幕較手機稍大，頁面可設計為兩欄顯示，並調整字體和間距，以增加可讀性。

@media (min-width: 768px) and (max-width: 1023px) {
  /* 平板直立樣式 */
}

平板橫向、筆電（Tablet Landscape / Small Laptop）：1024px – 1199px

當螢幕寬度在 1024px 到 1199px 之間時，頁面會針對橫向平板或小型筆電進行設計。

此時可以加入更多的內容區塊，並調整為三欄或多欄的顯示方式，以充分利用較大的螢幕空間。

@media (min-width: 1024px) and (max-width: 1199px) {
  /* 平板橫向、筆電樣式 */
}

桌機（Desktop）：1200px – 1399px

針對桌面電腦的標準螢幕寬度，通常設定在 1200px 到 1399px 之間。

這個尺寸的螢幕足夠大，可以展示多欄的布局，提供豐富的資訊並保持設計的整齊。

通常，網站的完整布局會在這個範圍內顯示。

@media (min-width: 1200px) and (max-width: 1399px) {
  /* 桌機樣式 */
}

超大螢幕（Large Desktop）：1400px 以上

針對大尺寸桌機或超大螢幕（例如電視或高解析度顯示器），我們會在 1400px 以上 的斷點設計樣式。

這個範圍的螢幕，通常需要更多的間距和更大的文字、圖片，以提供舒適的瀏覽體驗。

@media (min-width: 1400px) {
  /* 超大螢幕樣式 */
}

RWD 斷點整理

以下是以上常見的 RWD 斷點和對應的裝置類型總結：

範例：響應式斷點的應用

以下是一個簡單的 CSS RWD 斷點範例，展示了如何針對不同裝置設定樣式：

/* 手機樣式 */
@media (max-width: 767px) {
  .container {
    font-size: 14px;
    padding: 10px;
  }
}

/* 平板直立樣式 */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    font-size: 16px;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* 平板橫向、筆電樣式 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .container {
    font-size: 18px;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* 桌機樣式 */
@media (min-width: 1200px) and (max-width: 1399px) {
  .container {
    font-size: 20px;
    padding: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* 超大螢幕樣式 */
@media (min-width: 1400px) {
  .container {
    font-size: 22px;
    padding: 30px;
    max-width: 1600px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
}

在這個範例中：

• 當螢幕寬度小於 768px（手機）時，container 的字體大小和內邊距較小。
• 當寬度介於 768px 和 1023px（平板直立）時，頁面調整為雙欄布局。
• 當寬度為 1024px 到 1199px（平板橫向或小筆電）時，頁面顯示三欄布局。
• 當寬度介於 1200px 和 1399px（桌機）時，頁面顯示四欄布局。
• 當寬度大於 1400px（超大螢幕）時，頁面顯示五欄布局，並設定最大寬度 1600px。

結語

在 RWD 設計中，設定適當的斷點可以讓網站在不同裝置上顯示最佳效果。

無論是手機、平板還是桌機，利用不同的 max-width 和 min-width 斷點，我們可以針對不同的螢幕寬度，設計出適合的版面布局和樣式。

掌握這些常見的 RWD 斷點設置，將幫助您更靈活地設計出響應式網站，提高使用者在不同裝置上的體驗。