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:
@media screen and (min-width: 685px) {
.title {
font-size: 2rem;
}
}
-
screen
is the media type to which the styles will apply. This media query is intended for screens. -
and
is a logical operator, you can chain them as much as you want. For example, you could have a media query formin-width: 685px
andorientation: landscape
. -
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 asrem
.
Alright, let's go over what @media
queries can really do through concrete examples on Codepen π
Media types
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 not
or only
logical operators.
all
Means the styles in the query are suitable for all devices.
print
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.
screen
Our usual go-to. Means the styles are intended for screens.
speech
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.
width
and height
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 navigation
and newest listings
side views when reaching respectively 950px
and 1120px
(try it out yourself !).
orientation
As the name suggests, it allows us to apply styles based on the orientation of a device. Either portrait
or landscape
.
display-mode
Applies styles based on the display mode of an application.
Available modes are: fullscreen
, standalone
, minimal-ui
and browser
. More information.
@media all and (display-mode: fullscreen) {
body {
margin: 0;
border: 5px solid black;
}
}
Complex media queries
With the use of logical operators such as and
, not
, only
and ,
(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:
@media (min-height: 680px), screen and (orientation: portrait) { ... }
That pretty much wraps it up for media queries. Of course, there are many more features that can be learned here but this article covers tools that will help you implement most responsive layouts.
I hope you've learned at least a couple of things in this article, if you have, feel free to follow me on Twitter @christo_kade, I usually share code snippets, tips & tricks and new articles there π€
Top comments (2)
Great post! Only within the last year I have really gotten deep into the beauty of @media queries!
This really helped me. I now have a clearer understanding of @media queries. Thanks @Christoper Kade