Advanced Media Queries: Targeting Devices with Specific Breakpoints

Live editor for all the examples will be added soon.

Media queries in CSS allow you to apply styles based on the characteristics of the user’s device, such as the screen size, orientation, resolution, and more. They are a fundamental tool for creating responsive web designs that adapt to various devices like smartphones, tablets, laptops, and desktops.

In this guide, we will explore advanced media queries and how to target devices with specific breakpoints, allowing you to create highly responsive and adaptive layouts for all types of screen sizes.

1. What are Media Queries?

Media queries are a CSS technique used to apply styles only when certain conditions (or queries) about the user’s device or viewport are true. These conditions can include screen width, height, orientation, and resolution.

Basic Syntax:

@media (condition) {
  /* CSS rules */
}

Example:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

In this example, the background color of the body will change to light blue only if the viewport width is 768 pixels or less.

2. Understanding Breakpoints

Breakpoints are the points at which your website’s layout changes based on the screen size. They are commonly used to ensure that your site is optimized for various devices, from small mobile screens to large desktop monitors. When you hit a specific breakpoint, the design adjusts itself to fit that screen size better.

Common Breakpoints:

  • 320px: Small mobile devices (e.g., iPhone SE, older Android phones).
  • 480px: Mobile devices (e.g., standard smartphones).
  • 768px: Tablets (e.g., iPads).
  • 1024px: Small desktops or large tablets in landscape mode.
  • 1200px and above: Large desktops and full-width screens.

You can define your own breakpoints based on your design needs, but these are commonly used as a starting point.

3. Media Query Operators

Media queries can be used with operators such as min-width, max-width, min-height, max-height, orientation, and more. These operators allow you to precisely target specific screen sizes or orientations.

3.1 min-width and max-width

  • min-width: Applies styles when the viewport width is greater than or equal to a certain size.
  • max-width: Applies styles when the viewport width is less than or equal to a certain size.

Example:

/* Target devices with a screen width of 768px or wider */
@media (min-width: 768px) {
  body {
    background-color: lightgray;
  }
}

/* Target devices with a screen width of 768px or smaller */
@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

In this example, devices wider than 768px will have a light gray background, while smaller screens will have a light blue background.

3.2 min-height and max-height

Similar to width, min-height and max-height allow you to apply styles based on the height of the viewport.

Example:

@media (min-height: 600px) {
  header {
    height: 150px;
  }
}

@media (max-height: 600px) {
  header {
    height: 100px;
  }
}

In this example, the header’s height changes based on the height of the screen.

3.3 orientation (Landscape or Portrait)

The orientation media query is used to apply styles based on the screen’s orientation. It can be either portrait (height is greater than width) or landscape (width is greater than height).

Example:

/* Apply styles for landscape orientation */
@media (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

/* Apply styles for portrait orientation */
@media (orientation: portrait) {
  body {
    background-color: lightpink;
  }
}

This example changes the background color based on whether the device is in landscape or portrait mode.

4. Combining Media Queries

You can combine multiple media queries using the and, or, and not operators to create more complex conditions.

4.1 Using and

The and operator allows you to combine multiple conditions in a single media query. For example, you can target devices that meet both a width requirement and a height requirement.

Example:

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightcoral;
  }
}

In this example, the styles apply only to devices with a width between 768px and 1024px.

4.2 Using not

The not operator inverts a media query, applying styles to devices that do not match the specified conditions.

Example:

@media not (max-width: 768px) {
  body {
    background-color: lightgoldenrodyellow;
  }
}

This example applies styles to all devices except those with a screen width of 768px or less.

4.3 Using only

The only operator is used to target devices that support media queries, avoiding older browsers that do not.

Example:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightcyan;
  }
}

This applies the styles only to screens with a width of 600px or less, and only if the browser supports media queries.

5. Advanced Media Query Examples

5.1 Targeting Specific Devices

You can use specific breakpoints to target devices like smartphones, tablets, and desktops.

Targeting Mobile Devices:

@media (max-width: 480px) {
  /* Mobile styles */
  body {
    font-size: 14px;
  }
}

This example applies styles specifically for mobile devices with a maximum width of 480px.

Targeting Tablets:

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

This applies styles for tablet devices with widths between 481px and 768px.

Targeting Desktops:

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

This applies styles to desktops with a width of 1024px or more.

5.2 Using Breakpoints for Fluid Layouts

Fluid layouts adapt to any screen size. You can use media queries to apply different column layouts for varying screen sizes.

/* Default layout for large screens */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Adjust layout for tablets */
@media (max-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Stack items vertically on mobile */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

In this example, the layout changes from 3 columns to 2 columns on tablets and becomes a single column on mobile devices.

5.3 Targeting High-Resolution Screens (Retina Displays)

You can use media queries to target high-resolution screens (Retina displays) to provide high-quality images and sharper content.

@media only screen and (min-resolution: 2dppx) {
  img {
    background-image: url('[email protected]');
  }
}

In this example, the higher-resolution image [email protected] will be used for Retina displays or devices with a pixel density greater than 2 dots per pixel (dppx).

6. Media Queries for Dark Mode

Many modern devices support dark mode. You can use media queries to detect whether a user has enabled dark mode and apply dark-themed styles accordingly.

Example:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

In this example, the background color and text color change when the user has dark mode enabled.

7. Creating a Responsive Navigation Menu

Responsive navigation menus often need to adapt to different screen sizes. Here’s an example of using media queries to create a navigation menu that turns into a hamburger menu on smaller screens.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Menu</title>
  <style>
    nav ul {
      display: flex;
      list-style: none;
    }

    nav ul li {
      margin-right: 20px;
    }

    /* Hide menu items on smaller screens */
    @media (max-width: 600px) {
      nav ul {
        display: none;
      }

      .menu-icon {
        display: block;
        font-size:

 2rem;
      }
    }

    /* Show menu items again on larger screens */
    @media (min-width: 601px) {
      .menu-icon {
        display: none;
      }
    }
  </style>
</head>
<body>

  <nav>
    <span class="menu-icon">&#9776;</span> <!-- Hamburger icon -->
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</body>
</html>

Explanation:

  • For screens larger than 600px, the full menu is shown.
  • For screens smaller than 600px, the menu items are hidden, and a hamburger icon is shown instead.

8. Media Queries for Accessibility

You can also use media queries to adjust designs for accessibility. For example, you can detect when users have increased text size or reduced motion settings enabled.

Example for Reduced Motion:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

In this example, all animations and transitions are removed for users who prefer reduced motion.

9. Best Practices for Using Media Queries

  • Mobile-First Approach: Design for mobile devices first, then progressively enhance the design for larger screens using min-width media queries.
  • Avoid Too Many Breakpoints: Use breakpoints that make sense for your design, rather than adding too many, which can complicate your CSS.
  • Use REMs or Percentages for Sizing: Instead of fixed pixels, use relative units like rem or % to make your design more adaptable across different screen sizes.

10. Conclusion

Media queries are a crucial tool in responsive web design, allowing you to adjust your layout and design based on a user’s device or preferences. By targeting specific breakpoints, combining conditions, and using advanced features like orientation and dark mode detection, you can create a website that looks great on all devices—from small mobile screens to large desktop monitors.