Mobil-først betyr å skrive dine basis-stiler for den minste skjermen, og deretter legge til kompleksitet for større skjermer med min-width media queries — i stedet for å starte med skrivebord og fjerne ting.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Hvorfor mobil-først vinner: basis CSS forblir minimal (mobil får bare det den trenger — bra for ytelse på svakere enheter), og du legger på kompleksitet, som er enklere å resonnere om enn å overstyre/fjerne den. Det samsvarer også med hvordan innhold naturlig reflekterer fra én kolonne til mange.
Media queries reagerer på viewport — hele vinduet. Men en gjenbrukbar komponent (for eksempel et kort) kan vises i et bredt hovedområde eller en smal sidestolpe på samme side. Viewport-bredden kan ikke fortelle deg hvor mye plass komponenten faktisk har.
.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; }
}
Nå bytter det samme kortet automatisk til et horisontalt oppsett når dets container er ≥400px — enten fordi skjermen er stor eller fordi det er i en bred kolonne. Komponenten blir virkelig kontekst-uavhengig og gjenbrukbar.
Mobil-først holder responsiv CSS slank og vedlikeholdbar.
Container queries er et stort fremskritt: de lar komponenter reagere på deres eget tilgjengelige rom, som er akkurat det du trenger i en komponent-basert arkitektur (designsystemer, gjenbrukbare kort/widgets) der den samme komponenten brukes i mange kontekster.