Po poznaniu tej sztuczki czy raczej swego rodzaju wzorca i bezwzględnym przestrzeganiu go już nigdy nie zdarzy się nam dość częsta na różnych stronach sytuacja, w której mamy responsywność względem do pierwotnej wielkości okna, ale w momencie, gdy zaczynamy je zwężać i rozsuwać rzeczy blokują się nam na jakimś widoku i nie chcą wracać.
Zrobimy rzecz prostą – na małych ekranach kolor tła czerwony, na większych żółty, na jeszcze większych niebieski, na bardzo wielkich zielony. Zaczynamy mobile-first, czyli od widoku dla najmniejszych:
body {
height: 100vh;
background-color: tomato;
}Teraz będziemy stackować od najmniejszego do największego breakpointa nasze media queries:
@media screen and (min-width: 992px) {
body {
background-color: gold;
}
}Okej, teraz następny breakpoint pod poprzednim, pamiętając o kaskadowości CSS:
@media screen and (min-width: 1200px) {
body {
background-color: blue;
}
}Na sam dół dajemy największy breakpoint (dla minimalnej szerokości):
@media screen and (min-width: 1400px) {
body {
background-color: green;
}
}Teraz możemy zmniejszać i zwiększać okno dowoli, otworzyć stronę na dowolnie małym oknie, rozszerzyć (albo odwrotnie) – i nigdzie nam się nie zablokuje.
Niby proste, ale wiele stron ma z tym problem i jest dostosowanych tylko do pierwotnego rozmiaru okna, co sprawa, że jak otworzysz ją klikając na jakiś link, a mając zmniejszone okno na komputerze (z jakichkolwiek powodów) to rozszerzając okno jesteś zablokowany na widoku mobilnym i musisz odświeżyć już na rozciągniętym oknie, aby poprawnie wyświetlić widok na twój rozmiar ekranu.
Korzystając z tej porady i stosując ten wzorzec pracy z media queries nigdy nic nam się nie zablokuje. Blokuje się wtedy, gdy piszemy bałaganiarski kod, mieszamy min-width z max-width, mieszamy kolejność queries, nie mamy jasno określonego podejścia do pracy, np. zaczynamy pierwotnie od widoku mobilnego i stopniowo z każdym kolejnym media query dostosowujemy do rosnącego ekranu.
