Mobile-first oznacza pisanie bazowych stylów dla najmniejszego ekranu, a następnie dodawanie złożoności dla większych ekranów za pomocą media queries min-width — zamiast zaczynać od wersji na pulpit i usuwać elementy.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Dlaczego mobile-first wygrywa: bazowy CSS pozostaje minimalny (urządzenia mobilne otrzymują tylko to, czego potrzebują — dobrze dla wydajności na słabszych urządzeniach), a ty wartstwujesz złożoność, co jest łatwiejsze do zrozumienia niż jej nadpisywanie/usuwanie. Zgadza się też z tym, jak zawartość naturalnie przepływa z jednej kolumny na wiele.
Media queries reagują na viewport — całe okno. Jednak komponent wielokrotnego użytku (powiedzmy karta) może pojawić się w szerokim obszarze głównym lub wąskim pasku bocznym na tej samej stronie. Szerokość viewport nie potrafi powiedzieć Ci, ile miejsca ma komponent w rzeczywistości.
.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; }
}
Teraz ta sama karta automatycznie przełącza się na układ poziomy, ilekroć jej kontener ma ≥400px — niezależnie od tego, czy to dlatego, że ekran jest duży, czy dlatego, że znajduje się w szerokim obszarze. Komponent staje się naprawdę niezależny od kontekstu i wielokrotnie używalny.
Mobile-first utrzymuje responsywny CSS oszczędny i łatwy do utrzymania.
Container queries są znaczącym postępem: pozwalają komponentom reagować na ich własną dostępną przestrzeń, co jest dokładnie tym, czego potrzebujesz w architekturze opartej na komponentach (design systems, wielokrotnie używane karty/widżety), gdzie ten sam komponent pojawia się w wielu kontekstach.
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
Wesprzyj