CSS Media Queries

In the early days of the web, we designed sites for a single screen size. Today, users access your content on everything from tiny smartwatches to massive 4K monitors. Media queries are the secret sauce of "Responsive Web Design." They allow you to tell the browser: "If the screen is this wide, use these styles; otherwise, use these." Without them, your mobile users would be stuck zooming in and out of a desktop-sized layout.

Basic Syntax

Media queries are written using the @media "at-rule." This rule wraps a block of CSS and only executes it if a specific condition is met. The logic involves a media type (what kind of device), a media feature (the specific condition), and the CSS declarations themselves.

@media media-type and (media-feature) {
    /* These styles only apply if the condition is true */
    .element {
        property: value;
    }
}

Media Types

Before checking for screen size, you can specify the category of device. While there are several types, you will spend 99% of your time using screen.

1. All: all (The default setting; applies to everything if you don't specify a type).
2. Print: print (Used for printer output or "Save to PDF" views).
3. Screen: screen (The standard for computers, tablets, and phones).
4. Speech: speech (Used for screen readers that "read" the page aloud to users with visual impairments).

Media Features

Media features are the specific conditions the browser checks. These allow for granular control over how your site looks on different hardware.

• Width: min-width (screen is at least X wide), max-width (screen is no wider than X).
• Height: min-height, max-height (useful for tall vs. short screens).
• Orientation: orientation: landscape (wide), orientation: portrait (tall).
• Resolution: min-resolution (used to target high-DPI "Retina" screens).
• Aspect Ratio: min-aspect-ratio (the ratio of width to height).
• Pointer: pointer (detects if the user has a mouse or a finger/touchscreen).

Example Usage

Responsive Layout

The most common use for media queries is changing a layout from a single column (mobile) to multiple columns (desktop). In this example, we use a Mobile-First approach, where the base styles are for small screens, and the media query adds complexity for larger ones.

/* Base style: Mobile-first (single column) */
.container {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

/* Tablet and Desktop: Switch to horizontal layout */
@media screen and (min-width: 768px) {
    .container {
        flex-direction: row;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
    }
}

Responsive Typography

Text that looks great on a laptop might be overwhelmingly large on a phone. You can use media queries to scale your font sizes appropriately.

/* Default small screen font */
body {
    font-size: 14px;
    line-height: 1.5;
}

/* Scale up for larger reading surfaces */
@media screen and (min-width: 1024px) {
    body {
        font-size: 18px;
    }
}

Responsive Images

To prevent images from breaking your layout on small screens, we usually set them to 100% width. However, on massive screens, you might want to cap their size so they don't become blurry.

/* Ensure images never overflow their container */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* On very large screens, limit the image size for clarity */
@media screen and (min-width: 1440px) {
    img {
        max-width: 800px;
        border-radius: 8px;
    }
}

Combining Media Features

You aren't limited to just one condition. You can use logical operators like and, not, and , (which acts like "or") to create very specific rules.

/* Target tablets specifically in landscape mode */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .sidebar {
        display: none; /* Hide sidebar to save space */
    }
}

/* Apply styles if the device is a printer OR a speech reader */
@media print, speech {
    .navigation-menu {
        display: none;
    }
}

Browser Support

Media queries are a cornerstone of the modern web and enjoy nearly 100% support across all browsers, including Chrome, Firefox, Safari, and Edge. Modern browsers also support a newer "Range Syntax" which is even easier to read: @media (width >= 768px). While older browsers (IE11 and below) don't support this newer syntax, the standard min-width syntax is safe to use everywhere.

Summary

Media queries transform static web pages into dynamic, responsive experiences. By mastering min-width and max-width, you ensure that every user—regardless of their device—has a functional and beautiful experience. Remember to start with a mobile-first mindset, use logical breakpoints, and always test your designs by resizing your browser window.