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

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

媒體查詢語法規(guī)范

• 用 @media開頭 注意@符號(hào)
• mediatype 媒體類型
• 關(guān)鍵字 and not only
• media feature 媒體特性必須有小括號(hào)包含

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

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

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

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

<style>/* 1. 媒體查詢一般按照從大到小或者 從小到大的順序來 *//* 2. 小于540px 頁面的背景顏色變?yōu)榉凵?*/@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. 我們的數(shù)字后面必須跟單位 970px 這個(gè) px 不能省略的 */ </style>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。