新的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中文网其他相关文章！