Czy kiedykolwiek zastanawiałeś się, w jaki sposób ustawić rozmiar elementu na stronie dokładnie względem okna przeglądarki? Ilekroć razy chciałeś użyć do tego Javascriptu? Jeżeli na oba pytania odpowiedziałeś sobie wynikiem większym niż zero, zapoznaj się z poniższą wskazówką.

W dzisiejszym wpisie zademonstruję Ci w jaki sposób odnosić się do rozmiarów elementów względem okna przeglądarki (viewport). Pomocne będą Ci w tym jednostki vw, vh, vmax i vmin, czyli tak zwane Viewport Units. Bieżące wsparcie dla nich przez najpopularniejsze przeglądarki możesz zweryfikować na stronie caniuse.com. Stan na dzień dzisiejszy prezentuję poniżej.

Wsparcie dla Viewport Units dzięki http://caniuse.com/

Viewport width i viewport height

Ogólnie rzecz biorąc 1vh jest równy 1% wysokości obszaru roboczego ekranu, tak samo jak 1vw – z tym, że w tym przypadku mówimy o 1% szerokości. Z tej własności wynika, że w przypadku obszaru roboczego ekranu o szerokości 1000px wartość dla 1vw jest równa: 1% x 1000px = 10px.

Czyli jeżeli ustawisz wysokość i szerokość kontenera <div>  w ten sposób:

Otrzymasz następujący efekt:

Jednostki vh i vw używać możesz nie tylko dla wartości własności width czy height, ale i choćby dla określania rozmiaru fontu na stronie.

Przy zmianie rozmiarów okna font będzie dopasowywał się do wskazanej wartości.

Viewport minimum i viewport maximum

W tym wypadku wartość będzie dopasowywała się automatycznie, w zależności, której opcji użyjemy.

Wartość 1vmin jest równa mniejszej z wartości 1vh lub 1vw, natomiast 1vmax wybierze sobie większą wartość ze zbioru {1vh, 1vw}.

Sprawdźmy to w praktyce.

Ustaw dla kontenera następujący kod CSS:

Taki styl zapewni nam to, że w przypadku ekranu pionowego <div>  przyjmie szerokość i wysokość połowy krótszego boku obszaru roboczego (czyli szerokość).

Jeśli jednak zamienimy orientację ekranu na horyzontalną, wartości dopasują się wprawdzie również do krótszej krawędzi obszaru roboczego, ale w tym przypadku będzie nią już wysokość.

Zakończenie

Zachęcam Cię do testowania i dzielenia się z nami swoimi uwagami.

A może stworzyłeś już projekt, gdzie wykorzystałeś już viewport units?

Tagi: CSS3 • sizes