媒體查詢CSS詳解

一、媒體查詢CSS介紹

媒體查詢CSS是CSS3新增的功能，用於根據設備的特性變化，為不同的屏幕和設備類型創建不同的樣式，從而實現響應式設計。通過媒體查詢CSS，我們可以根據設備的屏幕寬度、設備類型、屏幕方向等特徵，來改變網站或應用程序的顯示方式。

媒體查詢CSS是一種基於CSS語言的條件規則，它允許我們編寫一組樣式表，這些樣式表只有當滿足某些條件時才會被應用。媒體查詢CSS的語法格式如下：

@media mediatype and (expressions) {
   CSS rules;
}

其中，mediatype代表的是設備類型或媒介類型，expressions代表要查詢的條件，CSS rules代表要應用的CSS規則。

二、媒體類型介紹

在媒體查詢CSS中，mediatype參數用於指定設備類型或媒介類型，常用的媒體類型有以下幾種：

• all：所有設備
• screen：電腦屏幕、平板電腦、智能手機等設備
• print：用於打印機和預覽頁面
• speech：盲人閱讀器等語音合成器

在媒體查詢CSS中，我們可以使用逗號將多個媒體類型連接起來，例如：

@media screen, print {
    /* CSS 規則 */
}

三、查詢條件介紹

媒體查詢CSS支持的查詢條件非常豐富，可以根據設備屏幕的寬度、高度、分辨率、方向等條件來應用不同的CSS規則。

1. 屏幕寬度查詢

屏幕寬度查詢常用於響應式布局，可以根據不同的屏幕寬度來應用不同的CSS規則。例如，下面的代碼將在屏幕寬度小於600像素時應用CSS規則：

@media screen and (max-width: 600px) {
    /* CSS 規則 */
}

2. 設備方向查詢

通過媒體查詢CSS，我們可以根據設備的橫屏或豎屏方向來應用不同的CSS規則，例如以下的代碼表示在設備橫屏時應用CSS規則：

@media screen and (orientation: landscape) {
   /* CSS 規則 */
}

3. 屏幕分辨率查詢

屏幕分辨率查詢可以根據設備的分辨率來應用不同的CSS規則，例如以下的代碼表示在分辨率為2倍屏幕或更高分辨率時應用CSS規則：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS 規則 */
}

4. 語言查詢

通過媒體查詢CSS，我們可以根據用戶的語言偏好來應用不同的CSS規則，例如以下的代碼表示在英語為主要語言時應用CSS規則：

@media screen and (lang: en) {
   /* CSS 規則 */
}

四、媒體查詢CSS示例

以下是一個簡單的媒體查詢CSS示例，根據設備寬度調整背景顏色：

@media screen and (max-width: 767px) {
   body {
       background-color: #f1f1f1;
   }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
   body {
       background-color: #d8d8d8;
   }
}

@media screen and (min-width: 992px) {
   body {
       background-color: #c1c1c1;
   }
}

五、總結

通過媒體查詢CSS，我們可以根據設備特徵來創建響應式樣式，讓網站或應用程序自適應不同的終端設備。媒體查詢CSS的語法格式、查詢條件、媒體類型等都需要我們掌握，以實現更加完美的響應式設計。