Mobilni-prvi pristop pomeni, da napišete bazne sloge za najmanjši zaslon, nato pa dodate kompleksnost za večje zaslone s min-width medijskimi poizvedbami — namesto da bi začeli pri namizju in stvari odstranjevali.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Zakaj je mobilni-prvi zmagovalec: bazni CSS ostane minimalen (mobilni naprave dobijo samo to, kar potrebujejo — dobro za zmogljivost na šibkejših napravah), in dodajate kompleksnost, kar je lažje razumljivo kot prepisovanje/odstranjevanje. To tudi ustreza temu, kako se vsebina naravno pretoka od enega stolpca k mnogim.
Mediajske poizvedbe se odzivajo na pregledovalnik — celotno okno. Toda ponovno uporabna komponenta (na primer kartica) se morda pojavi v široki glavno področju ali v ozkem stranski vrstici na isti strani. Širina pregledovalnika vam ne more povedati, koliko prostora ima komponenta dejansko.
.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; }
}
Sedaj se ista kartica samodejno preklopi na vodoravno postavitev, kadar je njen vsebnik ≥400px — ne glede na to, ali je to zato, ker je zaslon velik, ali ker je v širokem stolpcu. Komponenta postane res neodvisna od konteksta in ponovno uporabna.
Mobilni-prvi pristop drži responziven CSS kompakten in vzdrževan.
Poizvedbe vsebnika so velik napredek: omogočajo komponentam, da se odzivajo na svoj lastni razpoložljivi prostor, kar je natanko tisto, kar potrebujete v arhitekturi, ki temelji na komponentah (oblikovalskih sistemih, ponovno uporabnih karticah/gradnikih), kjer se ista komponenta pojavi v številnih kontekstih.