A Complete Guide to CSS Media Queries

A Complete Guide to CSS Media Queries

·

5 min read

What are media queries in CSS?

Have you ever wondered how some websites perfectly fit the device width on which we are viewing those sites? The answer is CSS media queries.

Media queries can modify the appearance (and even behavior) of a website or app based on a matched set of conditions about the user’s device, browser, or system settings.

Yes, you heard right, we can give conditional styles to HTML documents based on the device type the user is using or based on the color mode the user prefers(Dark or light) and so on.

CSS Media queries are a way to target browsers by certain characteristics, features, and user preferences, then apply styles or run other code based on those things. Perhaps the most common media queries in the world are those that target particular viewport ranges and apply custom styles, which birthed the whole idea of responsive design.

/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
  .element {
    /* Apply some styles */
  }
}

Why and when to use CSS media queries?

The real use case of media queries lies in the fact that we make the whole webpage responsive to the device size and orientation. Most of the end-users in today's scenario prefer mobile phones for viewing websites and so making the websites mobile responsive is mandatory nowadays. This approach of creating websites targeted to mobile devices is called Mobile first responsive design. Okay, let's get our hands dirty on media queries!

Syntax of media queries

css mediaqueries hashnode image.jpg

  1. @media - The first ingredient in a media query recipe is the @media rule itself, which is one of many CSS at-rules. Why does @media get all the attention? Because it’s geared to the type of media that a site is viewed with, what features that media type supports, and operators that can be combined to mix and match simple and complex conditions alike.

  2. media-type - What type of media are we trying to target? In many (if not most) cases, you’ll see a screen value used here, which makes sense since many of the media types we’re trying to match are devices with screens attached to them.

Available media types :

all: Matches all devices

print: Matches documents that are viewed in a print preview or any media that break the content up into pages intended to print.

screen: Matches devices with a screen.

speech: Matches devices that read the content audibly, such as a screen reader.

  1. media features - Once we define the type of media we’re trying to match, we can start defining what features we are trying to match it to. The most widely used media features are max-width and min-width. But there are 18 features available under 5 categories.

  2. operators - Media queries support logical operators like many programming languages so that we can match media types based on certain conditions.

Available operators :

and: used to target screens within a size range.

or: used to apply styles when any one of the media feature applies.

/*  Matches screens where either the user prefers dark mode or the screen is at least 1200px wide */
@media screen (prefers-color-scheme: dark), (min-width 1200px) {
  .element {
    /* Styles! */
  }
}

not: Perhaps we want to target devices by what they do not support or match. This declaration removes the body’s background color when the device is a printer and can only show one color.

@media print and ( not(color) ) {
  body {
    background-color: none;
  }
}

max and min-width

In the examples above we have noticed the max-width and min-width with some pixel values assigned, what does it mean?

The values specified for the features correspond to the viewport size of the browser of the device the user is viewing.

Some examples,

  • If we want to arrange the list of card elements column-wise on mobile devices we can use the following media query,
@media screen (max-width: 480px){
        flex-direction: column;
}

The above is equivalent to saying, Apply flex-direction as column when the viewport width is less than or equal to 480px

  • To target a particular range of viewport sizes we can use both min and max-width combined logically with and operator as follows,
/* This style will be applied when the viewport width is less than 960px and greater than 480px */
@media screen (min-width : 480px and max-width : 960px){
        flex-direction: column;
}

The simple rule of thumb is,

max-width => less than.

min-width => greater than.

use cases :

Dark mode switching

Having a “dark mode” color scheme is something we’re seeing a lot more of these days, and thanks to the prefers-color-scheme feature, we can tap into a user’s system or browser preferences to determine whether we serve a “dark” or a “light” theme based on their preferences.

This can be achieved by using the prefers-color-scheme media feature, which takes two values,

  • light: When a user has selected that they prefer a light theme or has no active preferences.

  • dark: When a user has selected a dark display in their settings.

body {
  --bg-color: burlywood; 
  --text-color: black;

  background-color: var(--bg-color);
  color: var(--text-color);
}

@media screen and (prefers-color-scheme: dark) {
  body {
    --bg-color: black;
    --text-color: burlywood;
  }
}

In the above example, the background color of the webpage will be burlywood on light screen mode and black on dark mode.

Conclusion

Here comes the end of this blog, but not for the media queries, yes there are a lot more awesome features are there in media queries, but the ones explained in this blog are more than enough to get started with the responsive design of websites. Try exploring other media query features will catch up in another awesome article about layout techniques, until then Happy Coding! Subscribe to my newsletter to be directly got notified when a new article I publish.