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

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



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


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

新的比較運算符

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

• <評估一個值是否小于另一個值
• >評估一個值是否大于另一個值
• =評估一個值是否等于另一個值
• <=評估一個值是否小于或等于另一個值
• >=評估一個值是否大于或等于另一個值

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



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

定位一系列視口寬度

通常，當我們編寫 CSS 媒體查詢時，我們會創(chuàng)建所謂的斷點——設(shè)計“中斷”并應(yīng)用一組樣式來修復(fù)它的條件。一個設(shè)計可以有一堆斷點！它們通?；趦蓚€寬度之間的視口：斷點開始的位置和斷點的結(jié)束位置。
以下是我們使用and運算符組合兩個斷點值的方法：



and當我們放棄布爾運算符以支持新的范圍比較語法時，您開始很好地了解編寫媒體查詢是多么的短和容易：



容易多了，對吧？并且很清楚這個媒體查詢在做什么。

瀏覽器支持

在撰寫本文時，這種改進的媒體查詢語法仍處于早期階段，目前還沒有像結(jié)合min-width和max-width. 不過，我們越來越近了！