The New CSS Media Query Range Syntax

<p>New features of CSS media query scope syntax: a more concise and responsive web design </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 media query is a key tool for selecting and setting element styles based on specific conditions. These conditions vary, but are usually divided into two categories: (1) the type of media used, and (2) specific functions of the browser, device, and even user environment. </p> <p>For example, to apply a specific CSS style to a printed document: </p> <pre class="brush:php;toolbar:false"><code>@media print { .element { /* 样式代码 */ } }</code></pre> <p>Since Ethan Marcotte proposed the concept of responsive web design, the ability to apply styles based on viewport width has made CSS media queries a core component of its content. If the browser's viewport width reaches a certain size, a set of style rules is applied to design elements that can respond to the browser's size. </p> <pre class="brush:php;toolbar:false"><code>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre> <p> Pay attention to the <code>and</code> operator in it? It allows us to combine statements. In this example, we combine conditions where the media type is screen and the <code>min-width</code> feature is set to 30em (or above). We can do the same thing to locate the range of viewport size: </p> <pre class="brush:php;toolbar:false"><code>/* 当视口宽度在30em到80em之间时 */ @media screen and (min-width: 30em) and (max-width: 80em) { .element { /* 样式代码 */ } }</code></pre> <p>Now, these styles apply to a clear viewport width range, rather than a single width! </p> <p> However, the Media Query Level 4 specification introduces a new syntax for using common mathematical comparison operators such as <code><</code>, <code>></code>, and <code>=</code>) to locate the range of viewport widths, which are more syntax-compliant when writing code while reducing the amount of code. </p> <p>Let's get a deeper understanding of how it works. </p> <h3>New comparison operator</h3> <p>The last example shows how we "forge" the range by combining conditions using the <code>and</code> operator. A major change in the Media Query Level 4 specification is that we have new operators to compare values ​​instead of combining them: </p> <ul> <li> <code><</code>: Evaluate whether one value is less than <strong> and another value </strong> </li><li>: Evaluate whether one value is greater than <code>></code> Another value <strong> </strong> </li>: Evaluate whether one value is equal to <li> and another value <code>=</code> <strong></strong>: Evaluate whether one value is less than or equal to </li> Another value <li> <code><=</code><strong>: Evaluate whether one value is greater than or equal to </strong> Another value </li> <li> <code>>=</code> Here is how we write a media query that applies style if the browser width is 600px or larger: <strong> </strong> </li>The following is how to write the same content using the comparison operator: </ul> <p> </p>The range of positioning viewport width<pre class="brush:php;toolbar:false"><code>@media (min-width: 600px) { .element { /* 样式代码 */ } }</code></pre> <p>When we write CSS media queries, we usually create what is called </p>—design the conditions for "breaks" and apply a set of styles to fix it. A design can have many breakpoints! They are usually based on the viewport between two widths: where the breakpoint starts and the breakpoint ends. <pre class="brush:php;toolbar:false"><code>@media (width >= 600px) { .element { /* 样式代码 */ } }</code></pre> <h3>The following is how we use the </h3> operator to combine two breakpoint values: <p></p> <pre class="brush:php;toolbar:false"><code>@media print { .element { /* 样式代码 */ } }</code></pre> <p>When we abandon the Boolean <code>and</code> operator and adopt the new scope comparison syntax, you will start to understand how easy it is to write media queries: </p> <pre class="brush:php;toolbar:false"><code>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre> <p>It's much simpler, right? And it clearly illustrates the role of this media query. </p> <h3>Browser support</h3> <p>At the time of writing, this improved media query syntax is still in its early stages and the current support is not as broad as the combination of <code>min-width</code> and <code>max-width</code>. However, we are approaching! Currently, Safari is the only major exception, but there is an unresolved issue that you can focus on. </p> <p>This browser supports data from Caniuse, which contains more details. The number indicates that the browser supports this feature in this and later versions. </p> <h4>Desktop</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>Mobile/Tablet PC</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>Summary</h3> <p>We extensively introduce the new syntax for positioning viewport width ranges in CSS media queries. Now that the Media Query Level 4 specification has introduced this syntax, and it has been adopted by Firefox and Chromium browsers, we are getting closer to being able to use the new comparison operators and combine them with other range media features other than widths, such as height and aspect ratios. </p> <p> This is just one of the newer features introduced by the Level 4 specification, and a series of queries that we can make based on user preferences. It didn't end there! Check out the "Complete Guide to CSS Media Query" to get the first look at what may be included in Media Query Level 5. </p>

The above is the detailed content of The New CSS Media Query Range Syntax. For more information, please follow other related articles on the PHP Chinese website!