A Complete Guide to CSS Media Queries
September 29, 2024 • 6 min read

A Complete Guide to CSS Media Queries

Web developmentResponsive DesignCSS3
share this article on

CSS media queries are a powerful tool in web development that allow you to create responsive designs by applying different styles based on various device characteristics. This guide will walk you through everything you need to know about CSS media queries, from basic concepts to advanced techniques.

Introduction to Media Queries

Media queries are a CSS technique introduced in CSS3. They allow you to apply CSS styles based on the characteristics of the device or browser viewport, such as width, height, orientation, or resolution. This capability is fundamental to creating responsive web designs that adapt to various screen sizes and devices.

Syntax and Structure

The basic syntax of a media query is as follows:

@media mediatype and (feature: value) {
  /* CSS rules go here */
}

Example:

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

This media query applies the enclosed styles when the screen width is 600 pixels or less.

Common Media Features

Here are some frequently used media features:

Example:

@media screen and (min-width: 768px) and (orientation: landscape) {
  /* Styles for landscape tablets and larger screens */
}

Logical Operators

Media queries support logical operators to create more complex conditions:

Example:

@media screen and (min-width: 600px) and (max-width: 900px),
       screen and (min-width: 1100px) {
  /* Styles apply between 600px-900px and above 1100px */
}

Breakpoints and Mobile-First Design

Breakpoints are the points at which your site’s content and layout will adapt in a certain way to provide the best possible user experience. A mobile-first approach involves designing for mobile devices first, then progressively enhancing the design for larger screens.

Example of a mobile-first approach:

/* Base styles for mobile */
body {
  font-size: 16px;
}

/* Tablet styles */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* Desktop styles */
@media screen and (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

Common Breakpoints in CSS

While there’s no one-size-fits-all approach to breakpoints, some common screen sizes are often used as reference points for responsive design. Here are some frequently used breakpoints:

  1. Mobile: 320px - 480px
  2. Tablet: 481px - 768px
  3. Laptop: 769px - 1024px
  4. Desktop: 1025px - 1200px
  5. Large Desktop: 1201px and above

Example of using these common breakpoints:

/* Mobile styles */
@media screen and (max-width: 480px) { ... }

/* Tablet styles */
@media screen and (min-width: 481px) and (max-width: 768px) { ... }

/* Laptop styles */
@media screen and (min-width: 769px) and (max-width: 1024px) { ... }

/* Desktop styles */
@media screen and (min-width: 1025px) and (max-width: 1200px) { ... }

/* Large Desktop styles */
@media screen and (min-width: 1201px) { ... }

Remember, these are just guidelines. Your specific breakpoints should be determined by your content and design needs.

Many CSS frameworks come with predefined breakpoints. Here’s an overview of breakpoints used in some popular frameworks:

1. Bootstrap 5

Bootstrap uses a mobile-first approach with the following breakpoints:

Example of using Bootstrap’s breakpoints:

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

2. Tailwind CSS

Tailwind’s default breakpoints are:

In Tailwind, you apply breakpoints using utility classes:

<div class="text-base md:text-lg lg:text-xl">
  Responsive Text
</div>

3. Foundation

Foundation uses these breakpoints:

You can use Foundation’s built-in grid-container class with these breakpoints:

<div class="grid-container medium-grid-block large-grid-block">
  Content here...
</div>

4. Bulma

Bulma’s breakpoints are:

To create a responsive layout in Bulma, you use classes like is-mobile, is-tablet, or is-desktop:

<div class="columns is-mobile">
  <div class="column">
    Mobile column
  </div>
</div>

5. Materialize CSS

Materialize uses these breakpoints:

Here’s an example of using these breakpoints in your own media queries with Materialize CSS:

/* Small devices (phones) - up to 600px */
@media only screen and (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

/* Medium devices (tablets) - between 601px and 992px */
@media only screen and (min-width: 601px) and (max-width: 992px) {
  body {
    background-color: lightblue;
  }
}

/* Large devices (desktops) - between 993px and 1200px */
@media only screen and (min-width: 993px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}

/* Extra-large devices (large desktops) - above 1200px */
@media only screen and (min-width: 1201px) {
  body {
    background-color: lightcoral;
  }
}

When using these frameworks, it’s generally best to stick to their predefined breakpoints for consistency. However, you can always add custom breakpoints if needed for your specific design requirements.

Best Practices

  1. Use relative units (em, rem, %) instead of absolute units (px) for better scalability.
  2. Keep media queries at the end of your CSS file or in a separate file to maintain specificity.
  3. Test your design on various devices and screen sizes.
  4. Use a mobile-first approach for more efficient code.
  5. Avoid device-specific breakpoints; focus on content-based breakpoints.

Advanced Techniques

  1. Nested Media Queries: Some preprocessors like Sass allow nesting media queries within selectors.
  2. Container Queries: While not yet widely supported, container queries allow styles to be applied based on the size of a containing element rather than the viewport.
  3. Feature Queries: Use @supports to detect browser support for specific CSS features.

Example of a feature query:

@supports (display: grid) {
  .container {
    display: grid;
  }
}

Browser Support and Fallbacks

Modern browsers have excellent support for media queries. However, for older browsers, consider using a JavaScript-based solution like Modernizr or providing a separate stylesheet for non-supporting browsers.

Conclusion

CSS media queries are an essential tool for creating responsive, adaptable web designs. By mastering media queries, you can ensure your websites look great and function well on any device, from small mobile screens to large desktop monitors. Remember to focus on your content, use sensible breakpoints, and always test your designs across various devices for the best results.

Back to Articles