新手指南：CSS @media 屬性簡介與應用

更新日期： 2024 年 9 月 14 日

在現代網頁設計中，響應式設計已經成為必不可少的一部分。

隨著不同設備（如手機、平板電腦和桌面電腦）尺寸的多樣化，確保網站在不同螢幕上都有良好的顯示效果變得至關重要。

CSS 中的 @media 屬性，提供了一種強大的方式，來針對不同的設備和螢幕尺寸，設計和應用樣式。

這篇文章將介紹 @media 是什麼，以及如何使用它來創建響應式網站。

什麼是 @media 屬性？

@media 屬性是一個 CSS 中的媒體查詢（Media Query），它允許你根據不同的設備特性（如螢幕寬度、高度、解析度等）來應用不同的樣式。

這使得你可以針對特定的設備或條件來設計樣式，從而讓你的網站在各種不同的設備上都能夠呈現最佳效果。

@media 的基本語法

@media (條件) {
  /* 針對符合條件的設備應用的樣式 */
}

條件可以是多種設備特性，例如螢幕的寬度、裝置的方向（橫向或縱向）等。

最常見的條件是螢幕寬度（width 或 max-width），這也是響應式設計中最常使用的。

例子：根據螢幕寬度應用樣式

/* 預設樣式 */
body {
  font-size: 16px;
  background-color: #f0f0f0;
}

/* 當螢幕寬度小於 600px 時應用這些樣式 */
@media (max-width: 600px) {
  body {
    font-size: 14px;
    background-color: #e0e0e0;
  }
}

在這個例子中，頁面有一個預設樣式，當螢幕寬度小於 600px 時，@media 查詢內的樣式會覆蓋預設樣式，將字體大小調整為 14px 並改變背景顏色。

最新 CSS 標準：範圍語法的使用

隨著 CSS 的發展，現在可以在媒體查詢中使用數學比較運算符來創建更靈活的條件表達式。你可以使用 <、<=、> 和 >= 等運算符。例如：

@media (width <= 600px) {
  body {
    font-size: 14px;
  }
}

這樣的語法更加直觀，表示當螢幕寬度小於或等於 600px 時應用樣式。

然而，這種新語法目前只在部分現代瀏覽器中得到支援，因此在使用時需要考慮兼容性問題。

目前來說，使用 @media (max-width: 600px) 仍然是最兼容且可靠的做法。

你可以在 Can I Use 網站上查看這些功能的支援情況。

@media 的常見應用場景

響應式字體大小

在不同設備上調整字體大小，確保內容在手機、平板和桌面上都易於閱讀。

body {
  font-size: 18px;
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

隱藏或顯示元素

根據螢幕大小顯示或隱藏某些元素，這在導航欄或移動設備上非常實用。

.navbar {
  display: block;
}

@media (max-width: 768px) {
  .navbar {
    display: none; /* 當螢幕寬度小於 768px 時隱藏導航欄 */
  }
}

調整佈局

在桌面設備上顯示多欄佈局，而在移動設備上顯示單欄佈局，以適應不同的螢幕大小。

.container {
  display: flex;
  flex-direction: row;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 螢幕寬度小於 768px 時切換為單欄佈局 */
  }
}

@media 查詢的其他用法

除了 max-width 之外，@media 還有其他許多強大的用法，例如：

• min-width：當螢幕寬度大於指定值時應用樣式。
• orientation：根據裝置的方向（橫向或縱向）應用樣式。

例子：針對橫向或縱向模式應用樣式

/* 當裝置為橫向（landscape）模式時應用 */
@media (orientation: landscape) {
  body {
    background-color: #ffcc00;
  }
}

/* 當裝置為縱向（portrait）模式時應用 */
@media (orientation: portrait) {
  body {
    background-color: #6699cc;
  }
}

結語

@media 是一個強大的工具，它使得響應式設計變得簡單而高效。

通過合理使用 @media 查詢，你可以針對不同的設備特性，設計出適合各種螢幕尺寸和方向的樣式，從而提升用戶在不同設備上的體驗。

希望這篇文章能幫助你理解 @media 屬性，並在你的網頁設計中靈活運用它，讓你的網站在所有設備上都能呈現最佳效果！