Flexible boxes, czyli elastyczne pojemniki

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.


Download · Live Demo

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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *