Media queries are a huge part of our daily life as web developers, and yet, most of us have only touched the surface when it comes to what they can do.
For those who aren't familiar with the concept, let me explain it briefly.
What are media queries?
To illustrate, try changing the size of your browser's window. As you move it around, you'll notice that the size and positions of elements often move based on the width and height of your screen.
This is done thanks to media queries who's job is to modify your site's layout based on a device's general type or on certain parameters (such as its size).
The general syntax of media queries goes as follows:
screenis the media type to which the styles will apply. This media query is intended for screens.
andis a logical operator, you can chain them as much as you want. For example, you could have a media query for
min-width:is a media feature, in this example it tells our browser to apply the styles between the two brackets only when reaching a minimum width of 685 pixels. You can use many unit types, such as
Alright, let's go over what
@media queries can really do through concrete examples on Codepen 👇
Most of us know of the
screen media type, but there are two other lesser known types.
Media types simply describe the category of a device. By default, the
all type is used except when using the
only logical operators.
Means the styles in the query are suitable for all devices.
Means the styles in the query are intended for paged material and documents viewed on a screen in print preview mode.
For example, if we have a "reservation confirmation" page we'd like for our user to print, we could hide the social media links at the bottom using this media query.
Right clicking and trying to print this page should display the preview without the bottom text.
Our usual go-to. Means the styles are intended for screens.
This type is intended for screen readers.
A very limited amount of CSS attributes have an impact on screen reader behavior but it's worth knowing this type. You could, for example, hide a specific element of the screen that shouldn't be read by screen readers or have code punctuation be read out loud.
Essential media features
I won't cover the full list of media features, as some of them are obscure and have very little use-cases. If you're interested in the full list, check it out here.
Our bread and butter, these features allow us to apply styles based on the width and height of our viewport.
For example, DEV hides the
newest listings side views when reaching respectively
1120px (try it out yourself !).
As the name suggests, it allows us to apply styles based on the orientation of a device. Either
Applies styles based on the display mode of an application.
Available modes are:
browser. More information.
Complex media queries
With the use of logical operators such as
, (comma) we can now build complex media queries for specific use-cases.
In this example, we want our video frame to take the full width and height of the screen when in landscape mode and on a tablet (for a better viewing experience):
Additionally, you can use the comma to apply any given styles to multiple queries, for example:
I hope you've learned at least a couple of things in this article!