Syntax and Common Breakpoints

A media query wraps CSS rules and applies them only when a condition is true. The basic syntax:

The most common media types:

• all — applies to all output devices (default)
• screen — computer and phone screens
• print — for print preview and printing
• speech — screen readers

Media features describe characteristics of the device or viewport. Common features: width, height, orientation, resolution, prefers-color-scheme, hover.

The most used feature — targets screens at or above a width threshold. Mobile-first approach.

There are no universally correct breakpoints. A popular set based on common device widths:

• 480px — large phones
• 768px — tablets
• 1024px — small desktops, landscape tablets
• 1280px — standard desktops
• 1536px — large desktops

Rather than device breakpoints, modern practice sets breakpoints where the content breaks. Design at one size, resize, and add a breakpoint when the layout starts to look bad.

Modern CSS supports range syntax inside media queries — more readable than combining min and max:

Use and to require multiple conditions simultaneously:

Use not to negate a media query. Applies to everything that does NOT match the query:

Separate multiple queries with commas — like a selector list. Styles apply if ANY query matches.

Using em units for breakpoints (instead of px) makes them scale with the user's browser font-size preference, improving accessibility.

Media queries apply CSS conditionally based on device or viewport characteristics. Use min-width for mobile-first, max-width for desktop-first. Set breakpoints where content needs it, not at arbitrary device sizes. Modern range syntax improves readability.