CSS Media Queries

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true, such as a minimum screen width.

Basic Syntax

The syntax for a media query consists of a media type and can contain one or more expressions.

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

Interactive Demo

Resize your browser window to see the box below change color and text as it hits different "breakpoints".

/* Mobile-First: Default styles are for small screens */
.box { background: lightpink; }

/* Desktop: Add styles for larger screens */
@media screen and (min-width: 900px) {
    .box { background: lightblue; }
}

Common Breakpoints

While there is no "correct" list of breakpoints, these are the most commonly used for standard device sizes:

• 480px — Mobile devices
• 768px — iPads and Tablets
• 1024px — Laptops and Desktops
• 1200px — Large Desktops

Orientation: Portrait vs Landscape

Media queries can also detect the orientation of a mobile device.

@media (orientation: landscape) {
    body {
        background-color: lightgrey;
    }
}