Box Model & Layout

Media Queries

Responsive design — adapt styles to screen size, orientation, and user preferences.

1Width Breakpoints

Apply styles only when the viewport matches a condition.

Example Code

/* Mobile-first */
.card { padding: 16px; }

@media (min-width: 768px) {
  .card { padding: 24px; }
}

@media (min-width: 1024px) {
  .card { padding: 32px; }
}

2User Preferences

Respect system preferences for dark mode and reduced motion.

Example Code

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

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

3Container Queries

Style based on parent size instead of viewport — modern responsive design.

Example Code

.parent { container-type: inline-size; }

@container (min-width: 400px) {
  .child { display: flex; }
}

Finished reading?

Mark this topic as complete to track progress.

CSS Grid

Next Topic

CSS Gradients