如何正確使用CSS媒體查詢

CSS媒體查詢是一種非常有用的技術，可以讓我們根據不同的設備和屏幕寬度來為網站做不同的排版和布局，提高用戶體驗。在本文中，我們將深入探討如何正確使用CSS媒體查詢，讓你在實際開發中能夠更好地運用這一特性。

一、什麼是CSS媒體查詢

CSS媒體查詢是CSS3中的一項特性，它可以根據不同的設備和媒體類型來為網頁提供不同的樣式。比如，在PC上頁面的寬度通常比較寬，我們可以對文字大小、行高、寬度等做一些優化；而在移動設備上，頁面寬度比較狹小，我們可以將排版調整得更緊湊一些。

舉個例子，如果我們想為屏幕寬度小於等於768px的設備提供不同的樣式，可以這樣寫：

@media screen and (max-width: 768px) {
  /* 這裡就是我們要寫的樣式 */
}

其中，screen表示媒體類型為屏幕，max-width表示屏幕寬度小於等於768px。這樣，我們就可以為設備提供適配的樣式。

二、CSS媒體查詢的語法

CSS媒體查詢的語法非常簡單，如下：

@media 媒體類型 and (媒體屬性) {
  /* 樣式代碼 */
}

其中，媒體類型可以是all（所有設備）、print（打印設備）、screen（計算機屏幕）等等；媒體屬性可以包含屏幕寬度、屏幕高度、設備寬度、設備高度等屬性。

代碼示例：

/* 使用媒體查詢根據設備寬度設置段落的字號 */
@media screen and (max-width: 768px) {
  p {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) {
  p {
    font-size: 18px;
  }
}

上面的代碼中，我們使用了媒體查詢設置了設備寬度為768px以下和768px以上兩種情況下段落的字號分別為16px和18px。

三、CSS媒體查詢的應用場景

CSS媒體查詢可以廣泛應用於很多場景中，比如：

1、響應式設計

在響應式設計中，我們會根據設備寬度來改變網頁的布局和排版方式，讓網頁在不同設備上都能展現最佳的視覺效果。CSS媒體查詢是響應式設計的基礎。

2、定製化的打印樣式

我們可以使用CSS媒體查詢來為打印設備提供定製化的樣式。比如，可以將網頁的背景色改為白色，去掉一些在打印時不必要的元素等。

3、移動端和桌面端的差異化樣式

在移動端和桌面端上，頁面的寬度和排版方式有很大的不同。我們可以使用CSS媒體查詢為它們提供不同的樣式。

四、常用的媒體查詢

下面提供一些常用的媒體查詢供參考。

1、針對不同設備分辨率設置不同的字號

/* iPhone 4、4S 的屏幕寬度為320像素 */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  body {
    font-size: 14px;
  }
}

/* iPhone 5、5S、5C 的屏幕寬度為320像素 */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  body {
    font-size: 16px;
  }
}

/* iPhone 6、6S、7、8 的屏幕寬度為375像素 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  body {
    font-size: 18px;
  }
}

/* iPhone 6 Plus、6S Plus、7 Plus、8 Plus 的屏幕寬度為414像素 */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
  body {
    font-size: 20px;
  }
}

/* iPad 的屏幕寬度為768像素 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
    font-size: 22px;
  }
}

/* iPad Pro 的屏幕寬度為1024像素 */
@media only screen and (min-device-width: 1024px) {
  body {
    font-size: 24px;
  }
}

2、針對不同設備設置不同的背景圖

/* iPhone4、4S 的屏幕寬度為320像素 */
@media screen and (min-device-width: 320px) and (max-device-width: 480px) {
  body {
    background-image: url("iphone4_bg.jpg");
  }
}

/* iPhone 5、5S、5C 的屏幕寬度為320像素 */
@media screen and (min-device-width: 320px) and (max-device-width: 568px) {
  body {
    background-image: url("iphone5_bg.jpg");
  }
}

/* iPhone 6、6S、7、8 的屏幕寬度為375像素 */
@media screen and (min-device-width: 375px) and (max-device-width: 667px) {
  body {
    background-image: url("iphone6_bg.jpg");
  }
}

/* iPhone 6 Plus、6S Plus、7 Plus、8 Plus 的屏幕寬度為414像素 */
@media screen and (min-device-width: 414px) and (max-device-width: 736px) {
  body {
    background-image: url("iphone6p_bg.jpg");
  }
}

/* iPad 的屏幕寬度為768像素 */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
    background-image: url("ipad_bg.jpg");
  }
}

/* iPad Pro 的屏幕寬度為1024像素 */
@media screen and (min-device-width: 1024px) {
  body {
    background-image: url("ipadpro_bg.jpg");
  }
}

3、針對不同設備設置不同的列數

/* 寬度大於等於992像素時，在一行上顯示三列 */
@media only screen and (min-width: 992px) {
  .container {
    width: 960px;
  }
  
  .col-sm-4 {
    float: left;
    width: 33.33333%;
  }
}
 
/* 寬度大於等於768像素時，在一行上顯示兩列 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 750px;
  }
  
  .col-md-6 {
    float: left;
    width: 50%;
  }
}

/* 寬度小於768像素時，每一列獨自佔據一行 */
@media only screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
  
  .col-xs-12 {
    float: left;
    width: 100%;
  }
}

總結

CSS媒體查詢是響應式設計中不可或缺的工具，通過它我們可以為不同設備設置不同的樣式和布局。我們在項目開發中需要根據實際情況，選取不同的媒體查詢，靈活運用。通過多次實踐和總結，你會不斷提升自己的媒體查詢技巧。