**1.定義**

在不同的屏幕大小下顯示的樣式不同，往往我們會(huì)針對(duì)不同的屏幕大小設(shè)計(jì)兩套及以上的樣式

**2.應(yīng)用**

移動(dòng)端布局、后臺(tái)管理系統(tǒng)

**3.優(yōu)缺點(diǎn)**

優(yōu)點(diǎn):可以適應(yīng)兼容多個(gè)設(shè)備

缺點(diǎn):css代碼量過(guò)多，影響瀏覽器的讀取效率；開(kāi)發(fā)過(guò)程中需要考慮的細(xì)節(jié)點(diǎn)比較多，加大了對(duì)于成本的投入

**4.語(yǔ)法**


**5.設(shè)備名稱**

用來(lái)表示所需要檢測(cè)的設(shè)備


**6.邏輯操作符**

邏輯操作符包含 not、and 和 only 三個(gè)，and：表示兩個(gè)條件同時(shí)成立；not：用于否定媒體查詢，當(dāng)查詢規(guī)則不為真時(shí)則返回 true，否則返回 false。如果使用 not 操作符，則還必須指定媒體類型；only：僅在整個(gè)查詢匹配時(shí)才會(huì)生效，當(dāng)不使用 only 時(shí)，舊版的瀏覽器會(huì)將 screen and (max-width: 500px) 簡(jiǎn)單地解釋為 screen，忽略查詢的其余部分，并將樣式應(yīng)用于所有屏幕。如果使用 only 運(yùn)算符，則還必須指定媒體類型。

邏輯運(yùn)算符包含not、and和only三個(gè)，其中and表示兩個(gè)條件同時(shí)成立，not表示

**7.媒體特性**

除了具體的類型外，還可以通過(guò)一些屬性來(lái)描述設(shè)備的具體特征，例如寬度、高度、分辨率等，如下表所示：


**8.注意事項(xiàng)**

a.在使用的過(guò)程中注意之間的空格，特別是邏輯運(yùn)算符與設(shè)備特征小括號(hào)之間的空格，這個(gè)是容易忽略 的點(diǎn)

b.媒體查詢的書寫的內(nèi)容一定放在需要覆蓋的樣式后面，否則無(wú)法被覆蓋，或者說(shuō)提高指定選擇器的權(quán)重

**- End -**

更多關(guān)于“web前端培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。