CSS Media Queries & Breakpoints

« Responsive Web Design (RWD) & Viewport Meta« Previous Flexbox Layouts & Alignment »Next »

Master standard responsive breakpoints and write modern CSS media queries using min-width and range syntax.

Mobile-First min-width vs. Desktop-First max-width

In modern web development, Mobile-First is the gold standard architecture. You write default styles for the smallest mobile screen, and use @media (min-width: ...) queries to layer on complexity as screen real estate grows.

Mobile-First (`min-width`): Cleaner CSS, less overriding, faster initial render on mobile devices.

Desktop-First (`max-width`): Requires overriding complex desktop flex/grid layouts with resets on small screens, leading to code bloat.

Mobile-First Multi-Column Layout

Try It Yourself »

/* Default Mobile View: 1 Column */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet (>= 640px): 2 Columns */
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop (>= 1024px): 4 Columns */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

Industry Standard Breakpoints

Avoid targeting specific device brands (e.g. "iPhone 15 width"). Instead, align with common device category thresholds:

Breakpoint	Min Width	Target Device Category
sm	640px	Large phones in landscape, small tablets
md	768px	Standard tablets (iPad portrait), foldables
lg	1024px	Small laptops, desktop monitors, tablet landscape
xl	1280px	Standard high-resolution desktop monitors
2xl	1536px	Ultra-wide monitors and 4K displays

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which CSS media query strategy is considered the modern industry standard for responsive styling?

« Previous: Responsive Web Design (RWD) & Viewport Meta Next: Flexbox Layouts & Alignment »