What is a CSS media query?

A CSS media query applies styles conditionally based on the user's device, viewport size, or preferences. The most common use is adjusting layouts at different screen widths for responsive design.

What are the standard responsive breakpoints?

Common breakpoints are 480px (large phone), 768px (tablet), 1024px (small desktop), 1200px (desktop), and 1440px (large desktop). However, the best practice is to set breakpoints based on where your content breaks, not specific devices.

What is mobile-first CSS?

Mobile-first means writing base styles for small screens and using min-width media queries to add styles for larger screens. This approach ensures the simplest, lightest styles load by default.

What are container queries?

Container queries let CSS components respond to their parent container's size instead of the viewport size. This makes components truly reusable across different layout contexts.

Should I use px or em for breakpoints?

Using em values for breakpoints respects the user's font-size settings. For example, @media (min-width: 48em) equals 768px at the default 16px font size but scales proportionally if the user has changed their base font size.

CSS Media Queries & Breakpoints

📱

Try Media Query Generator

Free, no signup →