See how this new syntax simplifies media queries.
Media queries enable responsive design, and about 80% of websites that use media queries use a range feature that tests for minimum and maximum viewport sizes. The Media Queries Level 4 specification includes new syntax for these range queries.
The new syntax has been available in Firefox since Firefox 63 and will be available in Chrome starting with 104. Let’s see how it can simplify your query.
A typical media query test for a minimum viewport width would be written as follows:
@media ( min-width : 400px ) { // Styles for viewports with a width of 400 pixels or
…
The post New Syntax for Scoped Media Queries in Chrome 104 first appeared on Lenix Blog .
This article is reprinted from https://blog.p2hp.com/archives/9486
This site is for inclusion only, and the copyright belongs to the original author.