Mobile-first betyder at skrive dine basis-stilarter til den mindste skærm, og derefter tilføje kompleksitet til større skærme med min-width mediespørgsmål — i stedet for at starte ved computeren og fjerne ting.
Mobile-first i praksis
/* base: mobile — single column, simple */
.layout { display: grid; gap: 1rem; }
/* enhance for tablet and up */
@media (min-width: 768px) {
.layout { grid-template-columns: 1fr 2fr; }
}
/* enhance further for desktop */
@media (min-width: 1200px) {
.layout { grid-template-columns: 1fr 2fr 1fr; }
}
Hvorfor mobile-first vinder: basis CSS forbliver minimal (mobil får kun det, den har brug for — godt for performance på svagere enheder), og du lagdeler kompleksitet, hvilket er lettere at forstå end at overskrive/fjerne det. Det matcher også, hvordan indhold naturligt reflower fra en kolonne til mange.
Mediespørgsmålenes begrænsning
Mediaespørgsmål reagerer på viewport — hele vinduet. Men en genbrugelig komponent (for eksempel et kort) kan dukke op i et bredt hovedområde eller en smal sidebar på samme side. Viewport-bredde kan ikke fortælle dig, hvor meget plads komponenten faktisk har.
Container queries løser dette
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Nu skifter det samme kort automatisk til et horisontalt layout, når dets container er ≥400px — hvad enten det skyldes, at skærmen er stor, eller fordi den er i en bred kolonne. Komponenten bliver virkelig kontekstuafhængig og genbrugelig.
De supplerer hinanden
- Mediespørgsmål — sideniveaulayout, globale breakpoints, brugerindstillinger (mørk tilstand, reduceret bevægelse).
- Container queries — komponentniveaurespons for genbrugelige komponenter.
Hvorfor det betyder noget
Mobile-first holder responsiv CSS kortfattet og vedligeholdelig.
Container queries er et stort fremskridt: de lader komponenter reagere på deres eget tilgængelige rum, hvilket er præcis hvad du har brug for i en komponentbaseret arkitektur (designsystemer, genbrugelige kort/widgets), hvor den samme komponent optræder i mange sammenhænge.