CSS: Media Queries

Media queries in CSS allow you to apply styles based on various device characteristics such as screen width, height, orientation, and resolution. They are a key tool for creating responsive web designs that adapt to different devices and screen sizes. Here's a comprehensive guide on using media queries in CSS:

Basic Syntax

Media queries are written using the @media rule followed by a media type or media feature, and a set of CSS rules inside curly braces {}. The general syntax is:

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

Media Types

1. All: all (default, for all devices).
2. Print: print (for printers and print preview).
3. Screen: screen (for computer screens, tablets, smartphones, etc.).
4. Speech: speech (for screen readers and speech synthesizers).

Media Features

Media features allow you to specify conditions such as screen width, height, orientation, resolution, etc. Some common media features include:

• Width: min-width, max-width
• Height: min-height, max-height
• Orientation: orientation: landscape, orientation: portrait
• Resolution: min-resolution, max-resolution
• Aspect Ratio: min-aspect-ratio, max-aspect-ratio
• Device Aspect Ratio: min-device-aspect-ratio, max-device-aspect-ratio
• Color: min-color, max-color
• Monochrome: monochrome
• Grid: grid
• Pointer: pointer

Example Usage

Responsive Layout

/* Styles for all screens */
.container {
    width: 100%;
}

/* Styles for screens with minimum width of 768px */
@media screen and (min-width: 768px) {
    .container {
        max-width: 768px;
        margin: 0 auto;
    }
}

Responsive Typography

/* Default font size */
body {
    font-size: 16px;
}

/* Larger font size for screens with minimum width of 768px */
@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

Responsive Images

/* Style for all images */
img {
    max-width: 100%;
    height: auto;
}

/* Style for larger screens with minimum width of 1200px */
@media screen and (min-width: 1200px) {
    img {
        max-width: 1200px;
    }
}

Combining Media Features

You can combine multiple media features using logical operators and, or, and not to create complex conditions:

/* Example of combining media features */
@media screen and (min-width: 768px) and (orientation: landscape) {
    /* Styles for landscape orientation on screens with minimum width of 768px */
}

Browser Support

Media queries are widely supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. They provide a flexible and effective way to create responsive designs for different devices and screen sizes.

Conclusion

Media queries are essential for building responsive and adaptive web designs that work well across various devices and screen resolutions. By using media queries effectively, you can create layouts, typography, and styles that adjust and optimize based on the user's device capabilities and preferences.