Podczas pracy przy jednym z projektów potrzebowałem elastycznej siatki z pojemnikami o stałym i proporcjonalnym jednocześnie rozmiarze. Oznacza to dokładnie tyle, że strona o płynnej szerokości zawiera elementy o stałej minimalnej szerokości, ale rozciągające się proporcjonalnie do momentu, w którym mogą znów w całości wypełnią dostępną przestrzeń. Brzmi skomplikowanie, dlatego najlepiej jeśli sprawdzisz wszystko w działaniu.
Częściowy efekt uzyskamy poprzez określenie minimalnej szerokości elementów listy, a także szerokości w procentach. Poniżej właściwy kod dla listy nieuporządkowanej:
ul li {
min-width: 320px;
width: 50%;
}Podczas zmniejszania okna przeglądarki pojemniki nie będą mniejsze niż 320 pikseli, a dodatkowo przy większych szerokościach wypełnią dokładnie dostępną przestrzeń. Niestety podany przykład ma jedną wielką wadę. Przy skrajnych rozdzielczościach określona procentowa szerokość elementu jest zbyt rozbieżna. Wspomniane 50% to zupełnie różna szerokość przy 1024, a 1920 pikselach.
W tym momencie z pomocą przychodzą media-queries nam. Może nie najświeższy element specyfikacji CSS3, ale prawidłowo obsługiwany w nowoczesnych przeglądarkach. W założeniach media-queries powstały to modyfikacji wyświetlanych treści w zależności od warunków prezentacji. A czym właściwie różni się zmiana okna przeglądarki jak nie zmianą warunków wyświetlania?
Przykładowa składnia pozwala na zastosowanie standardowych reguł CSS w określonym przypadku, akurat jeśli szerokość maksymalna okna przeglądarki na ekranie monitora będzie wynosiła 320 pikseli. Tutaj usuwamy unoszenie warstw i przywracamy domyślną szerokość elementów.
@media screen and (max-width: 320px) {
div {
float: none;
width: auto;
}
}W podobny sposób określimy zasady dla różnych urządzeń, a także ich parametrów. Szczegóły techniczne na stronie dokumentacji W3C.