Mobile-first znamená psát vaše základní styly pro nejmenší obrazovku, poté přidat složitost pro větší obrazovky pomocí min-width mediálních dotazů — místo abyste začínali od počítače a odebírali věci.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Proč je mobile-first vítězem: základní CSS zůstává minimální (mobilní zařízení dostane jen to, co potřebuje — dobré pro výkon na slabších zařízeních), a vy vrstevnatě přidáváte složitost, což je snazší pochopit než ji přepisovat/odstraňovat. Také to odpovídá tomu, jak se obsah přirozeně přetéká z jednoho sloupce do mnoha.
Medialní dotazy reagují na viewport — celé okno. Ale opakovaně použitelná komponenta (řekněme karta) se může objevit v šiké hlavní oblasti nebo v úzkém bočním panelu na stejné stránce. Šířka viewportu vám nemůže říci, kolik místa má komponenta vlastně.
.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; }
}
Teď se stejná karta automaticky přepne na vodorovné rozložení, kdykoli je její kontejner ≥400px — ať je to proto, že je obrazovka velká, nebo proto, že je v širokém sloupci. Komponenta se stane skutečně nezávislou na kontextu a opakovaně použitelnou.
Mobile-first udržuje responzivní CSS kompaktní a snadno udržovatelné.
Kontejnerové dotazy jsou velkým pokrokem: umožňují komponentám reagovat na jejich vlastní dostupný prostor, což je přesně to, co potřebujete v architektuře založené na komponentách (systémy návrhu, opakovaně použitelné karty/widgety), kde se stejná komponenta objevuje v mnoha kontextech.