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).
Kategorie: HTML + CSS. Tagi: #css, #viewport. Źródło obrazków: Pixabay, Font awesome.
