Question 1

What are CSS media query breakpoints?

Accepted Answer

Common responsive breakpoints: 640px (sm, large phones), 768px (md, tablets), 1024px (lg, small laptops), 1280px (xl, desktops), 1536px (2xl, large screens). These are popularized by Tailwind CSS but are conventions, not standards. Build breakpoints around your content, not device sizes.

Question 2

What is a mobile-first CSS approach?

Accepted Answer

Mobile-first CSS writes base styles for small screens and uses min-width media queries to add styles for larger screens: @media (min-width: 768px) { ... }. This is preferable to max-width (desktop-first) because it loads less CSS on mobile and encourages simpler base layouts.

Question 3

What is the prefers-color-scheme media query?

Accepted Answer

@media (prefers-color-scheme: dark) detects if the user's operating system is in dark mode. Use it to apply dark color schemes automatically: @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #f0f0f0; } }. Combine with CSS custom properties for clean dark mode support.

CSS Media Query Builder

Common Breakpoints

Width Conditions

Media Type

User Preferences

Orientation

Resolution (HiDPI / Retina)

Breakpoint Visualizer

Common Breakpoints — click to load

Related Tools