在 CSS 中，Media Query 是一種用於指定不同螢幕尺寸和裝置型別的樣式表的技術。如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/0f410b5fd1a19cd0a690b3d7ce249bc3.png)

all and (max-width:360px) 是一個 Media Query 表示式，它指定了一個條件，只有在滿足條件時，Media Query 中的樣式才會生效。

具體來說，all 表示所有媒體型別都應用該樣式，包括螢幕、印表機、投影儀等。and 表示在 all 的基礎上，要同時滿足 max-width:360px 的條件才能應用該樣式。其中，max-width:360px 是一個媒體特性，指定了螢幕寬度最大為 360 畫素時應用該樣式。

因此，all and (max-width:360px) 的含義是，在所有媒體型別中，僅在螢幕寬度最大為 360 畫素時應用該樣式。這種技術通常用於為不同螢幕尺寸和裝置型別提供不同的佈局和樣式，以實現響應式設計。

以下是一個在 CSS 檔案中使用 Media Query 的具體例子：

```css
/* 在螢幕寬度小於 768px 時應用該樣式 */
@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
    background-color: #f5f5f5;
  }
}

/* 在螢幕寬度大於等於 768px 時應用該樣式 */
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
    background-color: #fff;
  }
}
```
這段 CSS 程式碼中使用了兩個 Media Query 表示式，分別在不同的螢幕寬度下應用不同的樣式。

第一個 Media Query 表示式 @media screen and (max-width: 767px) 表示在螢幕寬度小於 768 畫素時應用該樣式，其中 screen 表示媒體型別為螢幕，max-width: 767px 表示螢幕寬度最大為 767 畫素。

第二個 Media Query 表示式 @media screen and (min-width: 768px) 表示在螢幕寬度大於等於 768 畫素時應用該樣式，其中 min-width: 768px 表示螢幕寬度最小為 768 畫素。

在這個例子中，我們根據不同的螢幕寬度設定了不同的字型大小和背景色，從而實現了響應式設計。當螢幕寬度小於 768 畫素時，頁面會顯示較小的字型和淺灰色背景。

Media Query 在 CSS 中使用的一個具體例子

相關文章