Comprehensive Guide to Media Queries in CSS

Media queries are a cornerstone of responsive web design. They enable developers to create websites that adapt to different screen sizes, resolutions, and device capabilities. In this article, we'll explore every aspect of media queries in detail, making it perfect for anyone looking to master this essential CSS feature.

---

What Are Media Queries?

Media queries are a CSS technique introduced in CSS3. They allow you to apply CSS rules based on conditions such as screen size, orientation, and resolution. This enables developers to tailor styles for various devices and screen types.

---

Syntax of Media Queries

The basic syntax of a media query is as follows:

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

Components of a Media Query:

1. @media: The keyword used to define a media query.

2. Media Type: Specifies the type of device (e.g., screen, print, all).
   For knowing Media Types in more detail , please visit this link : 👇👇 https://codeswithpayal.hashnode.dev/media-types-in-css

3. Media Feature: A condition that must be met for the styles to apply (e.g., max-width, orientation).

4. CSS Rules: The styles that will be applied if the condition is met.

Example:

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

In this example, the background color will change to light blue for screens with a width of 768px or less.

Detailed Example with Explanation:

Suppose we want to design a website where the navigation menu appears differently on mobile and desktop screens. Here's how we can achieve that:

/* Default styles for larger screens */
nav {
    display: flex;
    justify-content: space-between;
    background-color: #333;
    color: white;
}

/* Styles for smaller screens */
@media screen and (max-width: 768px) {
    nav {
        flex-direction: column;
        align-items: center;
        background-color: #444;
    }
}

Explanation:

• For screens wider than 768px, the navigation menu is displayed as a horizontal bar.

• For screens 768px or smaller, the menu items are stacked vertically.

---

Media Types

Media types define the category of device the styles target. Common media types include:

• all: Default value; applies to all devices.

• screen: Targets screens such as desktops, tablets, and phones.

• print: Targets printed material and print previews.

• speech: Targets screen readers.

Example with Print Styles:

@media print {
    body {
        font-size: 12pt;
        color: black;
    }
    nav {
        display: none;
    }
}

Explanation:

• The font size and color are adjusted for printed documents.

• The navigation menu is hidden as it is unnecessary for print.

---

Media Features

Media features define the specific conditions for applying styles. Below are some commonly used media features:

1. Width and Height

• min-width: Minimum width of the viewport.

• max-width: Maximum width of the viewport.

• min-height: Minimum height of the viewport.

• max-height: Maximum height of the viewport.

Example:

@media screen and (max-width: 600px) {
    p {
        font-size: 14px;
        line-height: 1.5;
    }
}

2. Aspect Ratio

• min-aspect-ratio: Minimum aspect ratio.

• max-aspect-ratio: Maximum aspect ratio.

Example:

@media screen and (min-aspect-ratio: 16/9) {
    body {
        background-color: gray;
    }
}

Explanation: This rule applies when the width-to-height ratio of the screen is at least 16:9.

3. Orientation

• orientation: landscape: Applies when the width is greater than the height.

• orientation: portrait: Applies when the height is greater than the width.

Example:

@media screen and (orientation: landscape) {
    header {
        height: 50px;
        background-color: blue;
    }
}

Explanation: The header's height and background color change when the device is in landscape mode.

4. Resolution

• min-resolution: Minimum resolution (e.g., 72dpi, 300dpi).

• max-resolution: Maximum resolution.

Example:

@media screen and (min-resolution: 300dpi) {
    img {
        border: 2px solid black;
    }
}

Explanation: High-resolution screens will display images with a black border.

---

Combining Media Queries

Media queries can be combined using logical operators:

1. AND

Both conditions must be true.

@media screen and (max-width: 768px) and (orientation: portrait) {
    nav {
        display: none;
    }
}

2. OR (Comma-separated)

Any one of the conditions must be true.

@media screen and (max-width: 600px), (max-height: 400px) {
    footer {
        display: none;
    }
}

3. NOT

Excludes a specific condition.

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

---

Mobile-First vs. Desktop-First Approaches

1. Mobile-First

Start with styles for smaller screens and use min-width to add styles for larger screens.

body {
    font-size: 14px;
}

@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

2. Desktop-First

Start with styles for larger screens and use max-width for smaller screens.

body {
    font-size: 16px;
}

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

---

Best Practices for Using Media Queries

1. Keep Queries Organized: Group related queries together to improve readability.

2. Use Variables: If using preprocessors like SASS, define breakpoints as variables for consistency.

3. Test on Real Devices: Always test your designs on actual devices, not just emulators.

4. Avoid Hardcoding: Avoid using device-specific breakpoints like iPhone 12. Instead, use flexible breakpoints.

5. Combine Rules: Avoid repeating similar rules for multiple queries; combine them where possible.

---

Examples of Common Media Queries

Responsive Typography

body {
    font-size: 16px;
}

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

Responsive Navigation Bar

nav {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 600px) {
    nav {
        flex-direction: column;
    }
}

Hiding Elements

@media screen and (max-width: 500px) {
    .sidebar {
        display: none;
    }
}

Advanced Example:

Imagine creating a card layout that switches from a grid on desktops to a single column on mobile:

/* Default styles for larger screens */
.card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Styles for smaller screens */
@media screen and (max-width: 768px) {
    .card-container {
        display: block;
    }
    .card {
        margin-bottom: 20px;
    }
}

Explanation:

• On larger screens, the cards are displayed in a 3-column grid.

• On smaller screens, the layout switches to a single column for better readability.

---

Conclusion

Mastering media queries is essential for building responsive and user-friendly websites. By understanding their syntax, types, features, and best practices, you can create designs that adapt seamlessly to various devices and screen sizes. Whether you're targeting a mobile-first audience or optimizing for desktops, media queries are a powerful tool in your CSS toolkit.

Feel free to experiment and implement these techniques in your projects. Happy coding!