CSS Responsive Design: Media Queries and Mobile-First

What is it?

Responsive design makes a website look and work on all screen sizes — from phones (320px) to large monitors (1920px+). Media queries apply different CSS rules based on screen width.

Why does it matter?

Over 60% of web traffic is mobile. A non-responsive website frustrates mobile users, ranks lower in Google search (mobile-first indexing), and signals unprofessional quality. Responsive design is a baseline requirement.

Learn responsive web design — mobile-first approach, breakpoints, media queries, responsive typography, and fluid images.

Real-World Use Cases

📱 E-commerce mobile experience - Product cards stack in one column on mobile, two on tablet, three on desktop — one CSS file, all devices.
📰 Blog article readability - Max line length on desktop and full width on mobile — typography adapts to screen size.
🧭 Navigation transformation - Desktop shows horizontal navbar; mobile shows a hamburger menu that opens a vertical drawer.
📊 Dashboard layout - Sidebar plus main panel on desktop; stacked single column on mobile — template areas make it clean.

Mobile-First Media Queries

/* Mobile-first: BASE styles for mobile (smallest screen)
   Then ADD complexity for larger screens */

.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
h1 { font-size: 1.5rem; }

/* Tablet: 768px and up */
@media (min-width: 768px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    h1 { font-size: 2rem; }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
    .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    h1 { font-size: 2.5rem; }
}

/* Large desktop: 1280px+ */
@media (min-width: 1280px) {
    .container { max-width: 1200px; margin: 0 auto; }
}

Common Patterns and Breakpoints

/* Standard breakpoints */
/* sm: 640px+  md: 768px+  lg: 1024px+  xl: 1280px+ */

/* Responsive nav: hide links on mobile */
.nav-links { display: none; }
@media (min-width: 768px) {
    .nav-links { display: flex; gap: 24px; }
    .hamburger { display: none; }
}

/* Fluid typography with clamp() */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

/* Fluid images */
img { max-width: 100%; height: auto; }

Preference-Based Media Queries

@media (prefers-color-scheme: dark) {
    body { background: #0f172a; color: #f1f5f9; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .no-print { display: none; }
    a::after  { content: " (" attr(href) ")"; }
}

Q: What is the difference between min-width and max-width in media queries?

min-width applies styles when the screen is AT LEAST that wide (mobile-first). max-width applies when the screen is AT MOST that wide (desktop-first). Mobile-first with min-width is recommended — it forces designing the simplest experience first and progressively enhances for larger screens.

Quick Access

Mobile-First Media Queries

Common Patterns and Breakpoints

Preference-Based Media Queries

Related Posts

Comments (0)

Leave a Comment