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.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
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.
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.
.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.
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.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér