CSS Media Queries and Responsive Design
How to work with media queries in CSS to build responsive web pages
In this post I’m going to first introduce media types and media feature descriptors, then I’ll explain media queries.
Media types
Used in media queries and @import declarations, media types allow us to determine on which media a CSS file, or a piece of CSS, is loaded.
We have the following media types
all
means all the mediaprint
used when printingscreen
used when the page is presented on a screenspeech
used for screen readers
screen
is the default.
In the past we had more of them, but most are deprecated as they proven to not be an effective way of determining device needs.
We can use them in @import statements like this:
@import url(myfile.css) screen;
@import url(myfile-print.css) print;
We can load a CSS file on multiple media types separating each with a comma:
@import url(myfile.css) screen, print;
The same works for the link
tag in HTML:
<link rel="stylesheet" type="text/css" href="myfile.css" media="screen" />
<link rel="stylesheet" type="text/css" href="another.css" media="screen, print" />
We’re not limited to just using media types in the media
attribute and in the @import
declaration. There’s more
Media feature descriptors
First, let’s introduce media feature descriptors. They are additional keywords that we can add to the media
attribute of link
or to the @import
declaration, to express more conditionals over the loading of the CSS.
Here’s the list of them:
width
height
device-width
device-height
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
orientation
scan
grid
Each of them have a corresponding min-* and max-*, for example:
min-width
,max-width
min-device-width
,max-device-width
and so on.
Some of those accept a length value which can be expressed in px
or rem
or any length value. It’s the case of width
, height
, device-width
, device-height
.
For example:
@import url(myfile.css) screen and (max-width: 800px);
Notice that we wrap each block using media feature descriptors in parentheses.
Some accept a fixed value. orientation
, used to detect the device orientation, accepts portrait
or landscape
.
Example:
<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" />
scan
, used to determine the type of screen, accepts progressive
(for modern displays) or interlace
(for older CRT devices)
Some others want an integer.
Like color
which inspects the number of bits per color component used by the device. Very low-level, but you just need to know it’s there for your usage (like grid
, color-index
, monochrome
).
aspect-ratio
and device-aspect-ratio
accept a ratio value representing the width to height viewport ratio, which is expressed as a fraction.
Example:
@import url(myfile.css) screen and (aspect-ratio: 4/3);
resolution
represents the pixel density of the device, expressed in a resolution data type like dpi
.
Example:
@import url(myfile.css) screen and (min-resolution: 100dpi);
Logic operators
We can combine rules using and
:
<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" />
We can perform an “or” type of logic operation using commas, which combines multiple media queries:
@import url(myfile.css) screen, print;
We can use not
to negate a media query:
@import url(myfile.css) not screen;
Important:
not
can only be used to negate an entire media query, so it must be placed at the beginning of it (or after a comma)
Media queries
All those above rules we saw applied to @import or to the link
HTML tag can be applied inside the CSS, too.
You need to wrap them in a @media () {}
structure.
Example:
@media screen and (max-width: 800px) {
/* enter some CSS */
}
and this is the foundation for responsive design.
Media queries can be quite complex. This example applies the CSS only if it’s a screen device, the width is between 600 and 800 pixels, and the orientation is landscape:
@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
/* enter some CSS */
}
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025