媒體查詢（Media Query）是CSS3新語法。

• 使用 @media查詢，可以針對不同的媒體類型定義不同的樣式
• @media 可以針對不同的屏幕尺寸設置不同的樣式

媒體查詢語法規范

• 用 @media開頭 注意@符號
• mediatype 媒體類型
• 關鍵字 and not only
• media feature 媒體特性必須有小括號包含

@media mediatype and|not|only (media feature) {CSS-Code; }

1. mediatype 查詢類型：將不同的終端設備劃分成不同的類型，稱為媒體類型
2. 關鍵字：關鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。

• and：可以將多個媒體特性連接到一起，相當于“且”的意思。
• not：排除某個媒體類型，相當于“非”的意思，可以省略。
• only：指定某個特定的媒體類型，可以省略。

3. 媒體特性：每種媒體類型都具體各自不同的特性，根據不同媒體類型的媒體特性設置不同的展示風格。我們暫且了解三個。 注意他們要加小括號包含
4. 媒體查詢書寫規則
注意： 為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣代碼更簡潔
eg：媒體查詢改變背景顏色

<style>/* 1. 媒體查詢一般按照從大到小或者 從小到大的順序來 *//* 2. 小于540px 頁面的背景顏色變為粉色 */@media screen and (max-width: 539px) {body {background-color: pink;}}/* 3. 540 ~ 970 我們的頁面顏色改為紫色 *//* @media screen and (min-width: 540px) and (max-width: 969px) {body {background-color: purple;}} */@media screen and (min-width: 540px) {body {background-color: purple;}}/* 4. 大于等于970 我們頁面的顏色改為黃色 */@media screen and (min-width: 970px) {body {background-color: yellow;}}/* 5. screen 還有 and 必須帶上不能省略的 *//* 6. 我們的數字后面必須跟單位 970px 這個 px 不能省略的 */ </style>

總結

以上是生活随笔為你收集整理的媒体查询（Media Query）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。