CSS Responsive Design

Mobile-first

Write the base styles for small screens, then add media queries for larger ones. Don't forget <meta name="viewport" content="width=device-width, initial-scale=1"> in the HTML head — without it, phones render a zoomed-out desktop page.

<style>
  body { font: 15px system-ui, sans-serif; margin: 8px; }
  .layout { display: grid; gap: 10px; }
  .layout > div { background: #e0f2fe; padding: 12px; border-radius: 8px; }
  .note::after { content: " (narrow screen: one column)"; color: #0369a1; }
  @media (min-width: 600px) {
    .layout { grid-template-columns: 200px 1fr; }
    .note::after { content: " (wide screen: two columns)"; }
  }
</style>
<p class="note">Resize the window</p>
<div class="layout">
  <div>Sidebar</div>
  <div>Main content</div>
</div>

Common breakpoints: 640px, 768px, 1024px, 1280px — but choose them where your layout breaks.

Other media features

• prefers-color-scheme: dark — the user's light/dark preference (dark mode).
• prefers-reduced-motion: reduce — turn off big animations.
• hover: hover — the device has a real pointer.

Container queries

Components can respond to the size of their container instead of the viewport:

.card-list { container-type: inline-size; }
@container (min-width: 500px) {
  .card { display: flex; }
}