CSS3 Media Queries

What Are Media Queries? 🧩

Media queries in CSS3 allow you to apply different styles depending on the properties of the device or viewport. For example, you can adjust the layout of your page for small screens like mobile phones and larger screens like desktop computers.

You can think of media queries as a way to "ask" the browser, "What kind of device is this?" and then apply different styles accordingly.

---

1. Basic Syntax of Media Queries 📝

The syntax for a media query is:

@media (condition) {
    /* Styles to apply when the condition is true */
}

Here, @media is followed by a condition (like max-width, min-width, etc.). If the condition matches the device’s characteristics, the styles inside the curly braces {} are applied.

Example: Media Query for Small Screens 📱

@media (max-width: 600px) {
    /* Styles for screens smaller than 600px wide */
    body {
        background-color: lightblue;
    }

    h1 {
        font-size: 18px;
    }
}

Explanation:

• max-width: 600px: This means the styles inside the media query will apply to devices with a screen width of 600px or less (typically mobile devices).
• The background color of the page is changed to lightblue and the font size of h1 is set to 18px.

---

2. Media Query with Multiple Conditions 🔄

You can also combine multiple conditions using and or or.

Example: Media Query for Devices with Both Max-Width and Min-Width 💻📱

@media (min-width: 601px) and (max-width: 1024px) {
    /* Styles for devices with a width between 601px and 1024px */
    body {
        background-color: lightgreen;
    }

    h1 {
        font-size: 24px;
    }
}

Explanation:

• min-width: 601px and max-width: 1024px: This media query applies styles to devices with screen widths between 601px and 1024px (typically tablets and small laptops).
• The background color changes to lightgreen, and the font size of h1 is set to 24px.

---

3. Common Media Query Conditions 📊

Here are some of the most common conditions you can use in media queries:

• max-width: Targets devices with a screen width less than or equal to a specific value (e.g., 600px).
• min-width: Targets devices with a screen width greater than or equal to a specific value.
• max-height: Targets devices with a screen height less than or equal to a specific value.
• min-height: Targets devices with a screen height greater than or equal to a specific value.
• orientation: Targets devices based on their orientation, either landscape (wide) or portrait (tall).
• resolution: Targets devices with specific screen resolutions (like retina displays).

---

4. Media Query for Different Screen Orientations 🔄

You can use media queries to apply different styles depending on whether the device is in landscape or portrait mode.

Example: Styles for Landscape and Portrait Orientations 📱💡

/* Portrait mode */
@media (orientation: portrait) {
    body {
        background-color: lightyellow;
    }
}

/* Landscape mode */
@media (orientation: landscape) {
    body {
        background-color: lightcoral;
    }
}

Explanation:

• orientation: portrait applies styles when the device is in portrait mode (tall).
• orientation: landscape applies styles when the device is in landscape mode (wide).
• The background color changes depending on the orientation of the device.

---

5. Media Queries for Retina Displays 🖼️

Retina displays have higher pixel density, and you can target them with the resolution condition in media queries. Devices with higher pixel density will show sharper images, so you might want to use higher-quality images.

Example: Media Query for High-Resolution Displays 🖥️

@media only screen and (min-resolution: 2dppx) {
    img {
        width: 150%;
    }
}

Explanation:

• min-resolution: 2dppx: This targets devices with a screen resolution of 2dppx (dots per pixel), which includes high-definition displays like retina screens.
• The image size is increased to 150% to make use of the higher resolution.

---

6. Combining Multiple Media Queries for Responsiveness 🖥️📱

For a fully responsive design, you can use multiple media queries to adjust the layout for different screen sizes and orientations.

Example: Full Responsive Design 🌐

/* Default Styles for Large Screens (Desktops) */
body {
    font-size: 16px;
    background-color: white;
}

h1 {
    font-size: 36px;
}

/* Styles for Tablets (Between 601px and 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    body {
        background-color: lightgray;
    }

    h1 {
        font-size: 28px;
    }
}

/* Styles for Small Screens (Mobile Devices) */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }

    h1 {
        font-size: 20px;
    }
}

Explanation:

• Default Styles: These styles apply to devices with a large screen, such as desktops.
• Tablet Styles: For devices with a screen width between 601px and 1024px (tablets), the background color changes to lightgray, and the font size of h1 reduces to 28px.
• Mobile Styles: For devices with a screen width of 600px or less (mobile phones), the background color changes to lightblue, and the font size of h1 further reduces to 20px.

---

7. Using @media with Other Media Types 🎧📺

You can also specify the media type, such as screen, print, or speech. This is useful when you want to apply styles specifically for different output devices.

Example: Printing Styles 🖨️

@media print {
    body {
        font-size: 12pt;
    }

    h1 {
        font-size: 20pt;
    }
}

Explanation:

• @media print: This media query applies styles only when the page is being printed.
• The font size of body and h1 is adjusted for printing purposes.