Media queries are a CSS technique that we can utilize when making our pages responsive.
We use @media
to create a CSS rule that only executes if a specified condition is true.
For example, if the device browser window is 600px or smaller, set the background-color
to red:
@media only screen and (max-width: 600px) {
body {
background-color: red;
}
}
And just like that we have a rule targeting small devices!
Using media queries
We can media queries to check things, such as:
- width and height of the viewport
- width and height of the device
- screen orientation (is the device landscape or portrait?)
- screen resolution
By being able to check this information, we’re able to deliver a better experience for our users. We can create rules that display the layout in a way that best suits the device being used.
To understand the anatomy of a media query, let’s look at our options with media types, media features & logical operators.
Media types
Media types allow us load CSS based on the device type.
The following media types are available:
-
all
for all media devices -
print
used for printers -
screen
used for displaying on a screen (computers, tablets, phones, etc) -
speech
used for screen readers
screen
is the most commonly used type.
Media features
Media features describe specific characteristics of the users’ device.
The media query will apply when it evaluates as ‘true’.
Here’s the list of features we can test for:
width
height
device-width
device-height
aspect-ratio
device-aspect-ratio
resolution
orientation
scan
grid
color
color-index
monochrome
Note that each has a corresponding min-*
and max-*
value. And all are optional!
Logical operators
We use the logical operators not
, and
, and only
to create a more complex media query.
and
We use and
to combine multiple media features together into a single media query. Each feature must be true for the query to return true. It’s also used for joining media features with media types.
not
The not
operator is used to negate a media query. It will be true if the query would otherwise return false. When using not
you must also specify a media type.
only
The only
operator is used to apply a style only if an entire query matches, It’s useful for preventing older browsers from applying selected styles. When using only
, you must also specify a media type.
, (comma)
We can also combine multiple media queries into a single rule by separating them with commas. If any of the queries in the list are true, the entire media statement returns true. So it can be thought of as acting like an or
operator.
Media query syntax
So armed with this knowledge, lets revisit the media query syntax!
A media query consists of a media type (in this case screen
) and can contain one or a number of expressions (here we use max-width
):
@media screen and (max-width: 600px) {
/* ... */
}
The query will return true if the media type matches the type of device the page is being displayed on & if all expressions in the media query are true.
When a media query returns true, the corresponding style rules will be applied!
Let’s look at a more complex example..
Here the rule applies when the user has a screen
device (a computer, tablet or phone), the width is between 600 and 768 pixels, and the orientation is landscape:
@media screen and (max-width: 768px) and (min-width: 600px) and (orientation: landscape) {
/* ... */
}
Typical device breakpoints
There are tons of screens and devices with different heights and widths, so it’s quite difficult to create an exact breakpoint for each device.
Often to simply the process of coding responsive layouts, we create media queries targeting devices based screen size ranges:
/* Extra small devices (phones, less than 600px wide) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets & large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops & desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
A better practice however, is to create your media queries in accordance with the needs of your content. This way you’ll reduce the likelihood of having your layout break, on devices you may not have considered.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (5)
Hello ! Don't hesitate to put colors on your
codeblock
like this example for have to have a better understanding of your code 😎Thanks! Will keep that in mind!
Which is the best practice for media queries? I read some use only min-width and other use only max-width.
There are some advantage?
You are awesome, thank you for writing this posts
Thank you for reading!