What is Media Query in CSS

What is Media Query in CSS?

A Media Query in CSS is a powerful tool that allows developers to apply styles to a webpage based on specific conditions, such as the size of the viewport, device characteristics (like resolution), and more. Media queries are primarily used in responsive web design to ensure that a website adapts and looks good across a variety of devices, screen sizes, and orientations (mobile phones, tablets, desktops).

By using media queries, CSS styles can be tailored to different devices, ensuring an optimal viewing experience without the need for multiple versions of a website.

Why Use Media Queries?

Responsive Design: Media queries allow you to create flexible layouts that adjust based on screen size, helping to create responsive designs.
Device Compatibility: Different devices (phones, tablets, laptops) have varying screen sizes and resolutions. Media queries make sure your website works seamlessly on all devices.
Improved User Experience: By changing the layout or functionality based on device features, you can optimize the user experience, making your site easier to navigate and read.
Performance Optimization: By loading different stylesheets or applying different layouts based on the device, you can optimize the performance of the page on various devices.

How to Use Media Queries in CSS?

To use a media query in CSS, you define the conditions under which a particular set of styles should be applied. These conditions can be based on characteristics like screen width, height, orientation, and more.

A basic media query syntax looks like this:

@media (condition) {
    /* CSS styles go here */
}

Syntax Explanation:

@media: This is the media query rule.
Condition: This defines the media type (e.g., screen) and the conditions (e.g., max-width, min-width) to apply styles based on.
CSS styles: The styles that will be applied if the condition is met.

Media Query Conditions

width / min-width / max-width:
- These properties allow you to target specific screen widths.
- min-width: Applies styles if the viewport is equal to or wider than the given width.
- max-width: Applies styles when the viewport is equal to or smaller than the specified width.
Example:
```
@media (max-width: 768px) {
    /* Styles for screens smaller than 768px (tablets, mobile phones) */
}
```
height / min-height / max-height:
- Similar to width, these properties target the height of the viewport.
Example:
```
@media (max-height: 600px) {
    /* Styles for screens smaller than 600px in height */
}
```
orientation:
- Specifies whether the device is in portrait or landscape orientation.
Example:
```
@media (orientation: portrait) {
    /* portrait orientation */
}
```
resolution:
- Targets the resolution of the device, commonly used to apply styles for high-definition screens (e.g., Retina displays).
Example:
```
@media (min-resolution: 192dpi) {
    /* high-resolution displays */
}
```
device-width / device-height:
- Specifies the width or height of the device's screen. This can be useful for targeting specific devices.
Example:
```
@media (device-width: 375px) {
    /* Styles for devices with a width of 375px, like iPhone 6 */
}
```

aspect-ratio:

Targets devices based on their width-to-height ratio.

Example:

@media (aspect-ratio: 16/9) {
    /* Styles for (device with a 16:9 aspect ratio) */
}

Common Examples of Media Queries

1. Simple Media Query for Small Screens (Mobile-first approach)

This query targets devices with a width of up to 768px (common for tablets and mobile phones) and changes the layout to accommodate smaller screens.

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

    .container {
        display: block;
        width: 100%;
    }
}

2. Targeting High-Resolution Screens (Retina Displays)

This query applies styles to devices with a minimum screen resolution of 192dpi (dots per inch), typically high-resolution screens like Apple's Retina displays.

@media (min-resolution: 192dpi) {
    .logo {
        width: 150px; /* Ensure the logo appears crisp on high-resolution screens */
    }
}

3. Orientation-Based Styling

You can adjust the layout depending on whether the device is in portrait or landscape mode.

@media (orientation: portrait) {
    .header {
        font-size: 20px;
    }
}
@media (orientation: landscape) {
    .header {
        font-size: 24px;
    }
}

4. Responsive Grid Layout

You can change the layout of a grid based on the screen width.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* default */
}
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr 1fr; /* Two columns on smaller screens */
    }
}
@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr; /* One column on very small screens */
    }
}

Best Practices for Using Media Queries

Mobile-First Design: Begin by designing for small screens, then gradually add media queries for larger screens.

Use Logical Operators: You can combine multiple conditions using logical operators like and, not, and only.

@media screen and (max-width: 768px) and (orientation: portrait) {
    /* Styles for devices that are both in portrait orientation and less than 768px wide */
}

Avoid Over-Specifying Breakpoints: Use breakpoints only where necessary. The most common breakpoints are based on common screen sizes (like 768px for tablets, 1024px for laptops, etc.).
Test Across Devices: Media queries may behave differently across various devices and browsers. Always check the responsiveness of your designs on different devices.

Media Queries are an essential feature of modern web development, enabling responsive design that adapts to different screen sizes, devices, and orientations. They allow developers to write flexible styles that provide an optimal user experience across a variety of platforms. By using media queries, you can create dynamic, device-specific styles to make your website more accessible and user-friendly. Whether you're building for mobile, tablet, desktop, or high-resolution displays, media queries are a crucial tool for every web designer and developer.

What is Media Query in CSS