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

Bartosz

Bartosz Stefanicki Sobota, 6.01.2024

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

Wielkość bloków w HTMLu ustala się na podstawie liczby pikseli, procentów. Możliwe jest również ustalenie odległości względem obszaru roboczego.

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).

Warto zobaczyć

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Marzec 2024).

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

1 komentarz


© 2005-2024 itporady.pl. Wszystkie prawa zastrzeżone.

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.