What is Responsive Web Design?

Responsive Web Design (RWD) means your site looks and works great on every screen size — from a 320px phone to a 4K monitor.

The three pillars of RWD

1. Fluid grids — use % and fr units instead of fixed px widths
2. Flexible images — images scale with their container
3. Media queries — apply different CSS at different breakpoints

Why mobile-first?

Over 60% of web traffic comes from mobile devices. Starting with mobile forces you to prioritize content and keep layouts clean. It's also easier to add complexity for larger screens than to remove it.

The viewport meta tag (required)

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this, mobile browsers zoom out and render the desktop layout. Always include it.

Common breakpoints

/* Mobile default: no query */
/* Tablet */
@media (min-width: 640px) { ... }
/* Desktop */
@media (min-width: 1024px) { ... }
/* Wide desktop */
@media (min-width: 1280px) { ... }