新的CSS媒體查詢範圍語法

<p>CSS媒體查詢範圍語法新特性：更簡潔的響應式網頁設計</p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174156973483540.jpg" class="lazy" alt="The New CSS Media Query Range Syntax "></p> <p>CSS媒體查詢是根據特定條件選擇和設置元素樣式的關鍵工具。這些條件多種多樣，但通常分為兩類：（1）使用的媒體類型，以及（2）瀏覽器、設備甚至用戶環境的特定功能。 </p> <p>例如，要為打印文檔應用特定CSS樣式：</p> <pre class="brush:php;toolbar:false"><code>@media print { .element { /* 样式代码 */ } }</code></pre> <p>自Ethan Marcotte提出響應式網頁設計概念以來，根據視口寬度應用樣式的能力使CSS媒體查詢成為其核心組成部分。如果瀏覽器的視口寬度達到特定大小，則應用一組樣式規則，從而設計出能夠響應瀏覽器大小的元素。 </p> <pre class="brush:php;toolbar:false"><code>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre> <p>注意其中的<code>and</code>運算符？它允許我們組合語句。在該示例中，我們將媒體類型為屏幕且<code>min-width</code>特性設置為30em（或以上）的條件組合在一起。我們可以做同樣的事情來定位視口大小的範圍：</p> <pre class="brush:php;toolbar:false"><code>/* 当视口宽度在30em到80em之间时 */ @media screen and (min-width: 30em) and (max-width: 80em) { .element { /* 样式代码 */ } }</code></pre> <p>現在，這些樣式應用於明確的視口寬度範圍，而不是單個寬度！ </p> <p>但是，媒體查詢級別4規範引入了一種新的語法，用於使用常見的數學比較運算符（例如<code><</code>、<code>></code>和<code>=</code>）來定位視口寬度的範圍，這些運算符在編寫代碼時更符合語法，同時減少了代碼量。 </p> <p>讓我們深入了解其工作原理。 </p> <h3>新的比較運算符</h3> <p>最後一個示例很好地說明了我們如何通過使用<code>and</code>運算符組合條件來“偽造”範圍。媒體查詢級別4規範中的重大變化是，我們有了新的運算符來比較值，而不是組合它們：</p> <ul> <li> <code><</code>：評估一個值是否<strong>小於</strong>另一個值</li> <li><code>></code>：評估一個值是否<strong>大於</strong>另一個值</li> <li> <code>=</code>：評估一個值是否<strong>等於</strong>另一個值</li> <li> <code><=</code>：評估一個值是否<strong>小於或等於</strong>另一個值</li> <li><code>>=</code>：評估一個值是否<strong>大於或等於</strong>另一個值</li> </ul> <p>以下是我們如何編寫一個媒體查詢，如果瀏覽器寬度為600px或更大，則應用樣式：</p> <pre class="brush:php;toolbar:false"><code>@media (min-width: 600px) { .element { /* 样式代码 */ } }</code></pre> <p>以下是使用比較運算符編寫相同內容的方式：</p> <pre class="brush:php;toolbar:false"><code>@media (width >= 600px) { .element { /* 样式代码 */ } }</code></pre> <h3>定位視口寬度的範圍</h3> <p>當我們編寫CSS媒體查詢時，我們通常會創建所謂的<code><dfn>断点</dfn></code>——設計“中斷”的條件，並應用一組樣式來修復它。一個設計可以有很多斷點！它們通常基於視口在兩個寬度之間：斷點開始和斷點結束的位置。 </p> <p>以下是我們如何使用<code>and</code>運算符組合兩個斷點值：</p> <pre class="brush:php;toolbar:false"><code>@media print { .element { /* 样式代码 */ } }</code></pre> <p>當我們放棄布爾<code>and</code>運算符而採用新的範圍比較語法時，您會開始了解編寫媒體查詢的簡便程度：</p> <pre class="brush:php;toolbar:false"><code>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre> <p>簡單得多，對吧？而且它清楚地說明了這個媒體查詢的作用。 </p> <h3>瀏覽器支持</h3> <p>在撰寫本文時，這種改進的媒體查詢語法仍處於早期階段，目前的支持範圍不如結合<code>min-width</code>和<code>max-width</code>的方法廣泛。不過，我們正在接近！目前，Safari是唯一一個主要的例外，但是有一個您可以關注的未解決問題。 </p> <p>此瀏覽器支持數據來自Caniuse，其中包含更多詳細信息。數字表示瀏覽器在該版本及更高版本中支持此功能。 </p> <h4>桌面端</h4> <p></p> <table> <thead><tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr></thead> <tbody><tr> <td title="Chrome - "></td> <td title="Firefox - "></td> <td title="IE - "></td> <td title="Edge - "></td> <td title="Safari - "></td> </tr></tbody> </table> <h4>移動/平板電腦</h4> <p></p> <table> <thead><tr> <th></th> <th></th> <th></th> <th></th> </tr></thead> <tbody><tr> <td title="Android Chrome - "></td> <td title="Android Firefox - "></td> <td title="Android - "></td> <td title="iOS Safari - "></td> </tr></tbody> </table> <h3>總結</h3> <p>我們廣泛地介紹了在CSS媒體查詢中定位視口寬度範圍的新語法。現在，媒體查詢級別4規範已經引入了該語法，並且它已被Firefox和Chromium瀏覽器採用，我們越來越接近能夠使用新的比較運算符並將它們與除寬度之外的其他範圍媒體特性（如高度和縱橫比）結合起來。 </p> <p>這只是級別4規範引入的較新特性之一，以及我們可以根據用戶偏好進行的一系列查詢。它並沒有就此結束！查看《CSS媒體查詢完整指南》，搶先了解媒體查詢級別5中可能包含的內容。 </p>

以上是新的CSS媒體查詢範圍語法的詳細內容。更多資訊請關注PHP中文網其他相關文章！