How to Use Media Queries in CSS?

In today’s world of diverse devices, where websites are viewed on everything from smartphones to desktop monitors, responsive design is a necessity. CSS media queries are the key tool that allow developers to create web pages that adapt seamlessly to different screen sizes and orientations.

With media queries, you can apply different styles based on the user’s device, ensuring a consistent and optimized user experience.

In this blog post, we’ll dive into what media queries are, how to use them in CSS, and best practices for creating responsive designs.

---

What Are CSS Media Queries?

CSS media queries are a feature that allow you to apply different CSS rules depending on the characteristics of the device displaying the webpage. These characteristics can include the width and height of the viewport, the screen resolution, the device orientation, and more. Media queries enable developers to create responsive designs that adjust styles based on these factors, ensuring that a webpage looks good on any device.

Basic Syntax:

@media media-type and (media-feature) {
    /* CSS rules go here */
}

• media-type: Specifies the type of device, such as screen or print.
• media-feature: Represents the characteristics of the device, such as max-width or orientation.

---

How to Use Media Queries

Media queries allow you to target specific screen sizes, orientations, or other properties. They can be applied to entire style sheets or individual rules, making it possible to adapt specific parts of a design for different devices.

1. Targeting Screen Width

One of the most common uses of media queries is to change the layout of a page based on the width of the device’s screen. This is essential for creating responsive designs that look good on both small screens (like phones) and larger screens (like desktops).

Example: Responsive Layout for Different Screen Widths

/* Default styles for desktop and larger screens */
body {
    font-size: 16px;
    background-color: #f0f0f0;
}

/* Styles for tablets and smaller screens */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        background-color: #e0e0e0;
    }
}

/* Styles for mobile phones */
@media (max-width: 480px) {
    body {
        font-size: 12px;
        background-color: #d0d0d0;
    }
}

In this example:

• The default styles are applied to larger screens (desktops and laptops).
• When the screen width is 768 pixels or less (common for tablets), the font size and background color change.
• For screens 480 pixels or less (common for mobile phones), the font size and background color adjust further to enhance readability and usability on smaller devices.

2. Targeting Device Orientation

Media queries can also target the orientation of the device—whether it’s in landscape (wider than tall) or portrait (taller than wide) mode. This is especially useful for mobile and tablet devices that can switch orientations based on how the user holds the device.

Example: Changing Layout Based on Device Orientation

/* Styles for landscape orientation */
@media (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

/* Styles for portrait orientation */
@media (orientation: portrait) {
    body {
        background-color: lightgreen;
    }
}

In this example, the background color changes based on the orientation of the device. This can be useful for layouts that need to adjust when users rotate their devices.

3. Targeting High-Resolution Devices (Retina Displays)

Media queries can also be used to target high-resolution screens, like Apple’s Retina displays or other high-DPI (dots per inch) devices. You can use media queries to serve higher-resolution images or adjust styles to take advantage of the sharper display.

Example: Targeting Retina Displays

/* Styles for high-resolution displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        background-image: url('high-res-background.png');
    }
}

In this example, the background image is swapped for a higher-resolution version on devices with a high pixel density, ensuring the image looks sharp and clear.

---

Media Query Features and Keywords

CSS media queries support a variety of media features that can be used to detect different characteristics of the device or browser. Here are some of the most commonly used ones:

1. width and height

These features detect the width and height of the viewport (browser window).

• max-width: Applies styles when the width is less than or equal to the specified value.
• min-width: Applies styles when the width is greater than or equal to the specified value.

Example:

@media (max-width: 600px) {
    /* Styles for small screens (600px or less) */
}

2. orientation

This feature detects whether the device is in landscape or portrait mode.

• orientation: landscape: Applies styles when the device is in landscape mode.
• orientation: portrait: Applies styles when the device is in portrait mode.

3. resolution

This feature detects the resolution of the device’s screen, often used to target high-DPI devices like Retina displays.

• min-resolution: Applies styles when the resolution is greater than or equal to the specified value (e.g., 192dpi).

4. hover

This feature checks if the device has the capability to hover, useful for differentiating between touchscreens and devices with a mouse.

Example:

@media (hover: hover) {
    /* Styles for devices with hover capability */
}

---

Best Practices for Using Media Queries

1. Mobile-First Design: Start your CSS with styles for smaller screens and use media queries to apply changes as the screen size increases. This approach simplifies development and makes it easier to handle mobile devices, which are often prioritized. Example of Mobile-First Design: /* Default styles for mobile devices */ body { font-size: 14px; } /* Styles for larger screens */ @media (min-width: 768px) { body { font-size: 16px; } } @media (min-width: 1024px) { body { font-size: 18px; } }
2. Use em or rem Units for Media Queries: Instead of using fixed pixel values, consider using relative units like em or rem for media queries. These units are more flexible and can adapt better to changes in the base font size. Example Using em Units: @media (max-width: 48em) { body { font-size: 14px; } }
3. Limit the Number of Breakpoints: While it’s tempting to create dozens of breakpoints for every screen size, it’s often better to stick to a few key breakpoints that cover the most common device sizes. Overcomplicating your media queries can make your CSS harder to maintain.
4. Test Across Multiple Devices: Always test your media queries on real devices or emulators to ensure your design works as expected. Tools like Chrome DevTools, Firefox Responsive Design Mode, and online services like BrowserStack can help you test your design on a variety of screen sizes and resolutions.

---

Conclusion

CSS media queries are an essential tool for creating responsive web designs that adapt to the wide variety of devices in use today. By targeting different screen sizes, orientations, and resolutions, you can ensure your website looks great on every device, from mobile phones to large desktop monitors.

To recap:

• Use media queries to apply styles based on device characteristics such as width, orientation, and resolution.
• A mobile-first approach simplifies your CSS and ensures a great experience on smaller devices.
• Limit the number of breakpoints and use relative units for greater flexibility.
• Always test your media queries on real devices or simulators to ensure your design works across the board.

By mastering media queries and following best practices, you’ll be well-equipped to create responsive designs that provide a seamless user experience across all devices.