Media queries are used to apply CSS styles depending on a device’s type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.
For responsive web designs,
we use media queries to apply styles based on the viewport width
First, let’s understand the properties
max-width: It targets the devices from width
0px to the maximum width assigned.
min-width is specified it takes the
min-width as the initial value instead of
min-width: It takes the initial value that is assigned to it and targets all the devices until the next
max-width is provided.
Here is an example of style using
Media queries using range context
CSS Media Queries Level 4 specification introduced a new syntax to write such queries
using mathematical comparison operators(
<, >, =, <=, >= ).
The above style can be written with mathematical operators as below:
This new syntax also works with a single value.
The code looks much cleaner, right?
We don’t have to process the
max-width properties to understand the styling.
Some media features with a “range” type are said to be false in the negative range. Did not get it? Don’t worry, we will explain it in a simple way.
Let’s first keep in mind that using negative values in media queries is valid and must be parsed.
When we query, a media feature is equal to(=), less than(<>), or less or equal than(<=)
any negative value, it must evaluate as
Let’s take an example mentioned in the Media Queries Level 4 specification.
The width of any device is never less than
so it will evaluate as
Next, we negate the feature using
So for all devices, the background will be green.
Now, let’s check another scenario.
When we query, the media feature is greater( > ), or greater or equal( >= )
than a negative value
it evaluates to
if the relationship is true.
The height of any device will always be greater than a negative value, hence the code will evaluate to true. All the devices will have the background color blue.
Why should we prefer the new media query range syntax over using min-width or max-width?
Suppose, we define different styles based on a breakpoint at
320px in the viewport width using min-width and max-width:
In this case, when the device’s width is 320px, both conditions are matched. This is not what we want. We want either of the style to apply instead of both to be applied at the same time.
To fix this issue we can make the below changes -
This fix ensures that the two styles don’t apply simultaneously when the viewport width is 320px.
However, there is still one issue. When the width is between 320px and 321px, none of the styles will apply.
One approach is to change the min-width to
Isn’t it an ugly way?
Yes! But do we have any other way of doing this?
Yup, the new range syntax provides a clean and neat solution.
The new range context syntax in Media Queries Level 4 specification is not widely supported in all browsers. New versions of Chrome, Firefox, Edge, and Opera have added support for the new syntax. Checkout CanIUse to know more about the supported browsers.