我們依靠CSS 媒體查詢(xún)來(lái)根據(jù)目標(biāo)條件選擇和設(shè)置元素樣式。這種情況可能是各種各樣的，但通常分為兩個(gè)陣營(yíng)：(1) 正在使用的媒體類(lèi)型，以及 (2) 瀏覽器、設(shè)備甚至用戶(hù)環(huán)境的特定功能。
因此，假設(shè)我們想將某些 CSS 樣式應(yīng)用于打印文檔：

我們可以在特定視口寬度上應(yīng)用樣式這一事實(shí)使 CSS 媒體查詢(xún)成為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的核心要素。如果瀏覽器的視口寬度是某個(gè)大小，那么應(yīng)用一組樣式規(guī)則，它允許我們?cè)O(shè)計(jì)響應(yīng)瀏覽器大小的元素。



注意到里面了and嗎？這是一個(gè)允許我們組合語(yǔ)句的運(yùn)算符。在該示例中，我們結(jié)合了媒體類(lèi)型為 ascreen且其min-width功能設(shè)置為30em（或更高）的條件。我們可以做同樣的事情來(lái)定位一系列視口大?。?br />


現(xiàn)在這些樣式適用于一個(gè)明確的視口寬度范圍，而不是單個(gè)寬度！
<但是 Media Queries Level 4 規(guī)范引入了一種新語(yǔ)法，用于使用常見(jiàn)的數(shù)學(xué)比較運(yùn)算符（例如、>和）來(lái)定位一系列視口寬度，=這在語(yǔ)法上更有意義，同時(shí)編寫(xiě)的代碼更少。
讓我們深入研究它是如何工作的。

新的比較運(yùn)算符

最后一個(gè)例子很好地說(shuō)明了我們?nèi)绾瓮ㄟ^(guò)使用and運(yùn)算符組合條件來(lái)“偽造”范圍。Media Queries Level 4 規(guī)范的重大變化是我們有新的運(yùn)算符來(lái)比較值而不是組合它們：

• <評(píng)估一個(gè)值是否小于另一個(gè)值
• >評(píng)估一個(gè)值是否大于另一個(gè)值
• =評(píng)估一個(gè)值是否等于另一個(gè)值
• <=評(píng)估一個(gè)值是否小于或等于另一個(gè)值
• >=評(píng)估一個(gè)值是否大于或等于另一個(gè)值

600px如果瀏覽器寬或更大，我們可能會(huì)編寫(xiě)一個(gè)應(yīng)用樣式的媒體查詢(xún)：



以下是使用比較運(yùn)算符編寫(xiě)相同內(nèi)容的外觀：

定位一系列視口寬度

通常，當(dāng)我們編寫(xiě) CSS 媒體查詢(xún)時(shí)，我們會(huì)創(chuàng)建所謂的斷點(diǎn)——設(shè)計(jì)“中斷”并應(yīng)用一組樣式來(lái)修復(fù)它的條件。一個(gè)設(shè)計(jì)可以有一堆斷點(diǎn)！它們通常基于兩個(gè)寬度之間的視口：斷點(diǎn)開(kāi)始的位置和斷點(diǎn)的結(jié)束位置。
以下是我們使用and運(yùn)算符組合兩個(gè)斷點(diǎn)值的方法：



and當(dāng)我們放棄布爾運(yùn)算符以支持新的范圍比較語(yǔ)法時(shí)，您開(kāi)始很好地了解編寫(xiě)媒體查詢(xún)是多么的短和容易：



容易多了，對(duì)吧？并且很清楚這個(gè)媒體查詢(xún)?cè)谧鍪裁础?

瀏覽器支持

在撰寫(xiě)本文時(shí)，這種改進(jìn)的媒體查詢(xún)語(yǔ)法仍處于早期階段，目前還沒(méi)有像結(jié)合min-width和max-width. 不過(guò)，我們?cè)絹?lái)越近了！