Practical Responsive Design Tips

Mobile‑first CSS, content‑driven breakpoints, fluid type, modern layout primitives, and bulletproof media. Use this mini‑site as a checklist and copy‑paste cookbook.

Start Mobile‑First

  • Write base styles for the smallest viewport.
  • Layer on enhancements with @media (min-width: ...).
  • Prefer rem, em, % over fixed px.

Breakpoints by Content

  • Resize until it “breaks”, then add a breakpoint.
  • Avoid device‑named breakpoints; screens vary wildly.
  • Use clamp() to keep things fluid between steps.

Modern Layout

  • Use CSS Grid/Flexbox, not floats.
  • Prefer gap utilities to margins for spacing.
  • Try container queries for truly component‑driven UIs.

Copy‑worthy Snippets

/* Fluid type scale */
:root {{ --step-0: clamp(0.95rem, 0.44vw + 0.85rem, 1.10rem);
        --step-1: clamp(1.15rem, 0.80vw + 0.95rem, 1.40rem);
        --step-2: clamp(1.38rem, 1.20vw + 1.05rem, 1.80rem); }}

/* Content‑driven layout break */
@media (min-width: 48rem) {{
  .grid-3 {{ grid-template-columns: repeat(3, 1fr); }}
}}

/* Container query */
.card-grid {{ container-type: inline-size; }}
@container (min-width: 42rem) {{
  .card-grid {{ grid-template-columns: repeat(3, 1fr); }}
}}