Responsive Web Design

Build adaptive interfaces using modern CSS techniques for all screen sizes.

Mobile-First Media Queries

/* Base: Mobile (320px+) */
.container {
	padding: 1rem;
}

/* Tablet (640px+) */
@media (min-width: 640px) {
	.container {
		padding: 2rem;
		max-width: 640px;
		margin: 0 auto;
	}
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
	.container {
		max-width: 1024px;
	}
}

Flexible Grid

.grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr; /* Mobile: single column */
}

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

@media (min-width: 1024px) {
	.grid {
		grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
	}
}

Fluid Typography