Start Mobile‑First
- Write base styles for the smallest viewport.
- Layer on enhancements with
@media (min-width: ...)
. - Prefer
rem
,em
,%
over fixedpx
.
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.
@media (min-width: ...)
.rem
, em
, %
over fixed px
.clamp()
to keep things fluid between steps./* 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); }}
}}