Rozmiary w CSS względem obszaru roboczego, czyli vw, vh, vmax i vmin

Niepotrzebny jest JavaScript, wystarczy kod CSS. Względem obszaru roboczego, czyli w praktyce ustawianie bloków względem okna przeglądarki użytkownika (tak zwane viewport). Dostępne są jednostki: vw, vh, vmax, vmin (tak zwane viewport units). Wsparcie dla nich można sprawdzić na stronie caniuse.com.

vh i vw

1vw jest równy 1% szerokości obszaru roboczego ekranu, 1vh jest równy 1% wysokości obszaru roboczego ekranu. Poniżej prezentuję przykłady wykorzystania tych jednostek.

div {
	background: blue;
	width: 20vw;
	height: 20vh;
}

Jednostki można wykorzystywać w różnych sytuacjach, także przy określaniu rozmiaru czcionki na stronie.

p {
	font-family: Arial;
	font-size: 20vw;
}

Podsumowując, powyższy blok div, jak i czcionka w paragrafach będzie się dostosowywała do obszaru roboczego ekranu.

vmax i vmin

vmax czyli viewport maximum, vmin czyli viewport minimum. Tutaj wartość dostosowuje się automatycznie.

div {
	background: blue;
	width: 20vmin;
	height: 20vmin;
}

1 vmin jest równy mniejszej wartości z 1vw lub 1vh, 1 vmax jest równy większej wartości ze zbioru {1vh, 1vw}. W powyższym przykładzie blok div przyjmie wartość (szerokość i wysokość) połowy krótszego boku obszaru roboczego ekranu, czyli szerokości (przy trybie pionowym telefonu na przykład).

Data publikacji: 30.10.2015 r. Tagi: css, viewport. Źródło obrazka porady: Pixabay.