初學者指南：CSS Media Queries 中的 max-width 和 min-width 概念

更新日期： 2024 年 11 月 5 日

在響應式網頁設計中，媒體查詢（Media Queries） 是一項非常重要的技術，它讓我們可以根據使用者裝置的特性（例如螢幕大小）來應用不同的 CSS 樣式，從而達到適應多種裝置的效果。

max-width 和 min-width 是媒體查詢中最常用的屬性，它們分別控制頁面在不同螢幕寬度下的顯示樣式。

本文將介紹 max-width 和 min-width 的概念和應用，讓新手快速掌握這些屬性的基本用法。

什麼是 max-width 和 min-width？

在 CSS 的媒體查詢中，max-width 和 min-width 屬性用來根據螢幕寬度來調整頁面的顯示效果：

• max-width：設定一個「最大寬度」，當裝置的螢幕寬度小於或等於這個值時，會應用相應的 CSS 樣式。
• min-width：設定一個「最小寬度」，當裝置的螢幕寬度大於或等於這個值時，會應用相應的 CSS 樣式。

為什麼要使用 max-width 和 min-width？

1. 適應不同裝置的顯示效果：幫助頁面在各種裝置上（如手機、平板、桌面）呈現最佳效果。
2. 提升使用者體驗：針對不同螢幕大小自動調整樣式，讓內容更具可讀性和美觀性。
3. 減少重複設計：不需為每種裝置設計不同的頁面，利用媒體查詢一次性解決多種情境需求。

max-width 和 min-width 的語法

基本語法如下：

@media (max-width: 768px) {
  /* 當螢幕寬度小於或等於 768px 時應用此樣式 */
  .container {
    background-color: lightblue;
  }
}

@media (min-width: 769px) {
  /* 當螢幕寬度大於或等於 769px 時應用此樣式 */
  .container {
    background-color: lightgreen;
  }
}

在這段範例中，當螢幕寬度小於或等於 768px 時，.container 的背景色會變成淺藍色；而當螢幕寬度超過 769px 時，背景色則會變成淺綠色。

max-width 和 min-width 的基礎應用

使用 max-width 來設計手機樣式

通常，我們會使用 max-width 來為小螢幕裝置（如手機）設計樣式，當螢幕寬度在某個最大值以內時（例如 600px），應用指定的樣式。

@media (max-width: 600px) {
  .container {
    font-size: 14px; /* 調整字體大小 */
    padding: 10px;   /* 調整內邊距 */
  }
}

此代碼表示：當螢幕寬度小於或等於 600px 時，會將 .container 的字體大小調整為 14px，內邊距調整為 10px，以便更適合手機顯示。

使用 min-width 來設計桌面樣式

當我們要為較大的螢幕設計特定的樣式時，min-width 非常有用。

例如，當螢幕寬度超過 1024px 時，應用一些適合桌面電腦的佈局和樣式。

@media (min-width: 1024px) {
  .container {
    font-size: 18px; /* 調整字體大小 */
    padding: 20px;   /* 調整內邊距 */
    max-width: 1200px; /* 設定最大寬度以改善閱讀體驗 */
  }
}

這段代碼表示：當螢幕寬度大於或等於 1024px 時，.container 的字體大小會調整為 18px，內邊距調整為 20px，並設定最大寬度為 1200px，讓內容在桌面裝置上顯示得更美觀。

max-width 和 min-width 的組合應用

在響應式設計中，我們經常會同時使用 max-width 和 min-width，來針對特定的範圍進行設計。

例如，為平板裝置設計一個專屬樣式，適用於螢幕寬度介於 601px 到 1023px 之間。

@media (min-width: 601px) and (max-width: 1023px) {
  .container {
    font-size: 16px;
    padding: 15px;
  }
}

此範例表示：當螢幕寬度在 601px 到 1023px 之間時（即平板的範圍），container 的字體大小會設定為 16px，內邊距設定為 15px，以適應這類裝置的顯示需求。

綜合範例：響應式網頁設計中的 max-width 和 min-width

以下是一個簡單的範例，展示了如何針對不同裝置的螢幕寬度設計響應式樣式：

<div class="container">
  <h1>歡迎來到我的網站</h1>
  <p>這是一段示例文字，展示如何使用 CSS 的 max-width 和 min-width 設計響應式網頁。</p>
</div>

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

/* 平板樣式 */
@media (min-width: 601px) and (max-width: 1023px) {
  .container {
    font-size: 16px;
    padding: 15px;
    text-align: left;
  }
}

/* 桌面樣式 */
@media (min-width: 1024px) {
  .container {
    font-size: 18px;
    padding: 20px;
    max-width: 1200px;
    margin: auto;
  }
}

在這個範例中：

• 當螢幕寬度小於或等於 600px（例如手機）時，.container 會顯示較小的字體、較窄的內邊距，並將文字置中。
• 當螢幕寬度在 601px 到 1023px 之間（例如平板）時，字體大小和內邊距會稍微增大，且文字靠左對齊。
• 當螢幕寬度大於或等於 1024px（例如桌面）時，會顯示較大的字體、較大的內邊距，並將最大寬度限制為 1200px，使內容更適合桌面閱讀。

結語

max-width 和 min-width 是 CSS 媒體查詢中最常用的屬性，它們讓我們可以根據螢幕寬度調整頁面樣式，以實現響應式設計。

透過 max-width 和 min-width，我們可以輕鬆地根據裝置大小提供最佳的顯示效果。

掌握這些基礎概念和應用技巧，將幫助您設計出適應多種設備的網站，提升使用者體驗。