CSS Media Queries

Media Queries are a powerful feature of CSS that enable developers to create responsive designs by applying styles conditionally, based on the characteristics of the user’s device, such as screen size, resolution, orientation, and more. This ensures that your website looks great and functions optimally across different devices and screen dimensions.

Why Use Media Queries?

  1. Responsive Web Design: Adjust the layout for different devices, such as desktops, tablets, and mobile phones.
  2. Device-Specific Styling: Apply styles based on device capabilities like screen resolution or orientation.
  3. Improved User Experience: Deliver a tailored design that meets user needs across various devices.

Syntax of Media Queries

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

Common Media Features:

  1. width and height: Specifies the viewport dimensions.
  2. min-width and max-width: Target a range of viewport sizes.
  3. orientation: Detects device orientation (portrait or landscape).
  4. resolution: Specifies screen resolution in dots per inch (DPI).
  5. hover: Checks if the device supports hover interactions.

Examples of Media Queries

1. Responsive Layout for Screen Sizes

CSS:

/* Default styles (for all devices) */
body {
    font-size: 16px;
    background-color: lightblue;
}

/* For tablets (min-width 768px) */
@media (min-width: 768px) {
    body {
        font-size: 18px;
        background-color: lightgreen;
    }
}

/* For desktops (min-width 1024px) */
@media (min-width: 1024px) {
    body {
        font-size: 20px;
        background-color: lightcoral;
    }
}

Explanation:

  • The default styles apply to all devices.
  • When the viewport width reaches 768px or more (tablets), the font size and background color change.
  • For screens 1024px or wider (desktops), the styles update again.

2. Orientation-Specific Styles

CSS:

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

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

Explanation:

  • The background color changes based on whether the device is in portrait or landscape orientation.

3. Using max-width for Mobile-First Design

CSS:

/* Mobile-first default styles */
body {
    font-size: 14px;
    color: black;
}

/* For screens larger than 600px */
@media (min-width: 600px) {
    body {
        font-size: 16px;
    }
}

/* For screens larger than 900px */
@media (min-width: 900px) {
    body {
        font-size: 18px;
    }
}

Explanation:

  • This mobile-first approach starts with styles optimized for smaller screens.
  • Styles progressively adjust for larger viewports, improving readability.

4. High-Resolution Screens

CSS:

@media (min-resolution: 2dppx) {
    img {
        content: url('high-res-image.png');
    }
}

Explanation:

  • This media query targets high-resolution devices (like Retina displays) and serves optimized images.

Combining Media Queries

You can combine multiple media features using logical operators like and, or, and not.

CSS Example:

/* Combine multiple conditions */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        background-color: lightyellow;
    }
}

/* Exclude specific devices */
@media not screen and (min-width: 1200px) {
    body {
        background-color: lightgray;
    }
}

Responsive Grid Example

Media queries work exceptionally well with responsive layouts like CSS Grid or Flexbox.

HTML:

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

CSS:

.container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .container {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

Output:

  • On small screens, items are displayed in a single column.
  • On medium screens, items are displayed in two columns.
  • On larger screens, items are displayed in three columns.

Best Practices for Using Media Queries

  1. Use Mobile-First Design: Define styles for small screens first, then add media queries for larger devices.
  2. Avoid Hardcoding Device Sizes: Focus on ranges like min-width or max-width instead of targeting specific devices.
  3. Test Across Devices: Ensure your design looks good on all screen sizes and resolutions.
  4. Combine Media Queries with Modern Layout Techniques: Use Flexbox or Grid for smoother responsiveness.
  5. Optimize Performance: Minimize unnecessary media queries to reduce CSS file size.

Browser Support

Media Queries are supported by all modern browsers, including:

  • Chrome
  • Firefox
  • Edge
  • Safari
  • Opera

For older versions of IE (prior to IE9), use polyfills like Respond.js.

Conclusion

CSS Media Queries are an essential tool for building responsive, device-friendly web designs. By tailoring styles to different screen sizes, orientations, and resolutions, you can create a seamless and engaging user experience.

For more web development tips, tricks, and tutorials, visit The Coding College! Empower your skills with the latest in coding and design.

Leave a Comment