Mobile-first reiškia, kad rašote savo bazines stilius mažiausiems ekranams, o tada pridedate sudėtingumą didesniems ekranams naudodami min-width medijos užklausas — o ne pradedami nuo darbalaukio ir panaudodami atgalinį būdą.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Kodėl mobile-first yra geresnis: bazinis CSS lieka minimalus (mobilūs įrenginiai gauna tik tai, ko jiems reikia — gerai veikia mažesnės galios įrenginiuose), o jūs paslankstote sudėtingumą, kuris yra lengviau suprasti nei jį perrašyti arba pašalinti. Tai taip pat atitinka tai, kaip turinys natūraliai persitvarko iš vieno stulpelio į kelis.
Mediajos užklausos reaguoja į rodinį — visą langą. Bet iš naujo naudojamas komponentas (pavyzdžiui, kortelė) gali pasirodyti plačioje pagrindinėje srityje arba siaurame šoniniame stulpelyje tame pačiame puslapyje. Rodinio plotis negali jums pasakyti, kiek vietos iš tikro turi komponentas.
.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; }
}
Dabar ta pati kortelė automatiškai persidaro į horizontalų maketą kiekvieną kartą, kai jos konteineris yra ≥400px — nesvarbu, ar tai yra todėl, kad ekranas didelis, ar todėl, kad jis yra plačiame stulpelyje. Komponentas tampa tikrai konteksto nepriklausomu ir iš naujo naudojamu.
Mobile-first laisvai išlaiko atsakomąjį CSS ir lengvai tvarkomą.
Konteinerinės užklausos yra didelis žingsnis į priekį: jos leidžia komponentams reaguoti į jų turimos vietos kiekį, kuris yra tiksliai tai, ko jums reikia komponentų pagrįstoje architektūroje (projektavimo sistemos, iš naujo naudojamos kortelės/valdikliai), kur tas pats komponentas patalpinamas daugelyje kontekstų.