CSS Media Queries

Creating responsive designs that adapt to various screen sizes and devices is essential in web development. Users access websites from different devices like smartphones, tablets, laptops, and large desktop screens. CSS Media Queries are a powerful tool to ensure that your website layout adjusts smoothly across these varying screen resolutions.

In this article, we'll cover what CSS Media Queries are, how they work, and walk through practical examples that showcase their use in making responsive and adaptive web designs.

What Are CSS Media Queries?

CSS Media Queries is a technique that allows you to apply different styles to different devices based on characteristics like screen width, height, resolution, and even device orientation. Media queries work by querying a device’s capabilities and then applying styles when certain conditions (like a minimum screen width) are met.

Media queries are crucial for creating responsive websites, where the layout and styling adjust dynamically depending on the user’s device and screen size. This allows you to ensure that your website looks great whether it's being viewed on a mobile phone, tablet, or desktop.

Basic Syntax of Media Queries

A basic media query looks like this:

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

For example:

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

In this case, the background color of the body will change to lightblue when the screen width is 600px or smaller.

Types of Media Features

Media queries rely on various media features to determine the conditions under which styles should be applied. The most commonly used media features include:

1. Width and Height:

   • max-width: Triggers styles when the viewport width is less than or equal to the specified value.
   • min-width: Triggers styles when the viewport width is greater than or equal to the specified value.
   • max-height and min-height: Similar to width, but for height.

2. Orientation:

   • orientation: Specifies whether the device is in "portrait" or "landscape" mode.

3. Resolution:

   • resolution: Refers to the resolution of the screen (e.g., 72dpi, 300dpi).

4. Aspect Ratio:

   • aspect-ratio: The ratio between the width and height of the viewport.

5. Color:

   • color: Refers to the number of bits per color component.
   • prefers-color-scheme: Useful for detecting if the user prefers light or dark mode.

Common Use Cases of CSS Media Queries

Let’s go through some practical examples where media queries are used to make a website responsive.

1. Responsive Layout for Different Screen Sizes

The most common use of media queries is to adjust the layout of a page based on the screen size.

Example:

/* For large desktops and laptops */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* For tablets and smaller devices */
@media (max-width: 1023px) {
  .container {
    max-width: 960px;
    padding: 0 20px;
  }
}

/* For mobile phones */
@media (max-width: 767px) {
  .container {
    max-width: 100%;
    padding: 0 15px;
  }
}

In this example:

• For desktops and laptops (minimum width of 1024px), the container has a max-width of 1200px and is centered.
• For tablets (screen width between 768px and 1023px), the container width is smaller, and additional padding is applied.
• For mobile devices (width smaller than 768px), the container takes up the full width of the screen.

2. Adjust Font Size on Mobile

Text readability is crucial on smaller screens. Media queries can help change font sizes based on screen width.

Example:

/* Default font size for desktops */
body {
  font-size: 18px;
}

/* Smaller font size for mobile devices */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
}

Here, the font size is set to 18px by default for desktops and laptops. On mobile devices with a screen width of 600px or smaller, the font size is reduced to 16px for better readability.

3. Changing Navigation Layout Based on Device

Navigation menus are typically horizontal on desktops, but on mobile devices, it's more practical to display them as vertically stacked lists.

Example:

/* Default horizontal navigation for desktops */
.nav ul {
  display: flex;
  justify-content: space-around;
}

/* Vertical navigation for mobile devices */
@media (max-width: 768px) {
  .nav ul {
    display: block;
    text-align: left;
  }
}

In this case, for devices with a screen width of 768px or smaller, the navigation menu becomes vertical, and the text is aligned to the left.

4. Media Queries for Orientation (Landscape vs. Portrait)

You can use media queries to apply styles based on the device's orientation.

Example:

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

/* Apply styles in portrait mode */
@media (orientation: portrait) {
  body {
    background-color: lightcoral;
  }
}

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

5. Dark Mode Support with Media Queries

Many modern devices support dark mode, where the background and other elements of the UI become dark to reduce eye strain. You can detect if the user prefers dark mode using the prefers-color-scheme media feature.

Example:

/* Light mode styles */
body {
  background-color: white;
  color: black;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Here, when a user has dark mode enabled on their device, the background becomes black, and the text turns white.

Media Queries in Responsive Design Frameworks

Many CSS frameworks like Bootstrap and Tailwind CSS include pre-built media queries to facilitate responsive design.

For example, in Bootstrap, breakpoints are defined like this:

• Extra small (xs): max-width: 576px
• Small (sm): min-width: 576px
• Medium (md): min-width: 768px
• Large (lg): min-width: 992px
• Extra large (xl): min-width: 1200px

You can use these predefined breakpoints to structure responsive layouts easily.

Best Practices for Using Media Queries

1. Mobile-First Approach: Start with styles for smaller screens and then progressively enhance them for larger screens using min-width media queries.

2. Avoid Overusing Media Queries: Instead of creating many specific media queries, try to use flexible units like percentages or rem/em for sizing. This can help naturally adjust content across different screens without needing as many breakpoints.

3. Test Across Devices: Always test your website on multiple devices and screen sizes to ensure that your media queries work as expected. You can use browser developer tools to simulate different screen sizes.

Conclusion

CSS Media Queries are an essential part of modern web development, enabling you to build responsive websites that adapt to various devices and screen sizes. By incorporating media queries into your design, you can ensure that your website provides a seamless experience for all users, whether they are browsing from a desktop or a mobile device.

In this article, we covered the basics of media queries, common use cases with examples, and best practices. With this knowledge, you can start using media queries to build responsive and adaptive websites.

Happy coding!