Pora przedstawić rozwiązanie, którego sam jakiś czas szukałem. Generalnie wielkość bloków w HTMLu ustala się na podstawie liczby pikseli, procentów. Tymczasem jest również możliwość ustalenia marginesów, wielkości (i innych) dla bloku, 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).

↑ Skocz do góry

Autor: Bartosz Stefanicki.
Tagi: , .

Dodaj komentarz

Bądź pierwszy!

avatar
wpDiscuz