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).
Warto zobaczyć
Szukasz hostingu?
Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Wrzesień 2023).
Data publikacji: 30.10.2015 r. Tagi: css, viewport. Źródło obrazka porady: Pixabay.