Każdy element renderowany na stronie internetowej ma możliwość definiowania swojego wyglądu poprzez właściwości opisane w CSS. W tym wpisie opiszemy jednostki, jakich możemy używać w CSS.
Jednostka „em”
Jest ona obliczana przez przeglądarkę internetową na podstawie wartości właściwości „font-size” bezpośredniego rodzica danego elementu.
Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<style>
.content { font-size: 10px; }
p:first-child { font-size: 1em; }
p:nth-child(2) { font-size: 2em; }
p:nth-child(3) { font-size: 3em; }
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Lorem Ipsum 1</p>
<p>Lorem Ipsum 2</p>
<p>Lorem Ipsum 3</p>
</div>
</div>
</body>
</html>
Dla paragrafów bezpośrednim rodzicem jest div z klasą „content”, dla którego wartość „font-size” ustawiliśmy na 10px.
Ustawiając dla pierwszego paragrafu wartość „font-size” na 1em oznacza to, że będzie on miał rozmiar 10px, drugi paragraf, dla którego „font-size” został ustawiony na 2em, będzie miał rozmiar 20px, i tak 3 trzeci paragraf dla którego „font-size” jest 3em będzie miał wielkość 30px.
Drugi przykład.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<style>
.content { font-size: 10px; }
p:first-child { font-size: 1em; }
p:nth-child(2) { font-size: 2em; }
p:nth-child(3) { font-size: 3em; }
a.test {
color:red;
font-size: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Lorem Ipsum 1</p>
<p>Lorem Ipsum 2
<a href="#" class="test">Link testowy</a>
</p>
<p>Lorem Ipsum 3</p>
</div>
</div>
</body>
</html>Tu do tej samej struktury dokumentu HTML wewnątrz jednego z paragrafów dodamy element „a”, któremu nadamy wartość „font-size” 2em.
Jak to będzie wyglądało i ile będzie wynosiła wielkość w px?
Bezpośrednim rodzicem elementu „a” jest drugi paragraf, którego wartość „font-size” wynosi 2em = 20px (w tym przypadku) w odniesieniu do div z klasą „content”, który jest bezpośrednim rodzicem drugiego paragrafu.
Nasz element „a” będzie miał rozmiar 2em w odniesieniu do paragrafu. Co w tym przykładzie będzie wynosiło 2em = 2x20px = 40px.
Stosując jednostkę „em” możemy manipulować rozmiarem danego elementu i jego dzieci.
Jednostka „rem”
Długość wyrażona za pomocą jednostki rem obliczana jest przez przeglądarkę na podstawie wartości właściwości „font-size”, którą posiada element pełniący rolę głównego korzenia (root) dokumentu HTML.
Można to ustawić w następujący sposób.
:root {
font-size: 10px;
}Przy tym ustawieniu, jeśli w dokumencie są teksty, które nie miały określonej swojej wielkości, to została im przypisana wartość określona dla „:root”.
Wróćmy do naszego przykładu.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<style>
:root { font-size: 10px; }
p:first-child { font-size: 1rem; }
p:nth-child(2) { font-size: 2rem; }
p:nth-child(3) { font-size: 3rem; }
a.test { font-size: 2rem; }
</style>
</head>
<body>
<div class="conteiner">
<div class="content">
<p>Lorem Ipsum 1</p>
<p>Lorem Ipsum 2
<a href="#" class="test">Link testowy</a>
</p>
<p>Lorem Ipsum 3</p>
</div>
</div>
</body>
</html>W tym wypadku paragrafy jak i element „a”, będący wewnątrz paragrafu, będą miały tą samą wielkość 2em czyli 2x10px=20px w odniesieniu do elementu głównego.
Za pomocą jednostek „em” i „rem” możemy także określać wysokość i szerokość danego elementu, nie tylko wartość „font-size”.
Jednostka „vw” i „vh”
Viewport width (szerokość okna przeglądarki) i viewport height (wysokość okna przeglądarki), są to jednostki relatywne względem rozmiaru okna przeglądarki. 40vh oznacza, że element o np. tej wysokości będzie zajmował 40/100 wysokości aktualnego okna przeglądarki.
Dla przykładu, gdy rozmiar szerokości okna przeglądarki internetowej w danej chwili wynosi 1200px to wartość 1vw jest równa 12px, ponieważ 1200px×0.01×1=12px itd.
Jednostka „vmin” i „vmax”
Obie jednostki są obliczane podobnie jak „vw” i „vh” w stosunku do aktualnego rozmiaru okna przeglądarki. „vmin” określa wartość aktualnie mniejszej wartość wysokości lub szerokości danego okna przeglądarki.
Np. gdy rozmiar wysokości okna przeglądarki internetowej w danej chwili jest większy od rozmiaru szerokości okna przeglądarki internetowej, wtedy
wartość „vmin” jest określana na podstawie szerokości okna przeglądarki.
Natomiast wartość „vmax” jest określana na podstawie wysokości tego samego okna przeglądarki internetowej.
Jednostka „%”
Jest jednostką określającą rozmiar w „%” w zależności od rozmiaru elementu rodzica.
Jeśli element rodzica na szerokość 500px a element jego dziecka ma szerokość 20% to będzie to odpowiadało 100px.
Jednostka „px”
Jest jednostką absolutną. Nie jest relatywna względem innych jednostek.
1px opisuje jeden najmniejszy, widzialny element na naszym ekranie.
Inne jednostki absolutne to: „cm”, „mm”, „in”, „pc, „pt”, są one głównie wykorzystywane do przygotowania css do druku. Zwykle w osobnych definicjach Media Query.
Łączenie różnych jednostek
W CSS mamy dostępną funkcję calc(), która umożliwia nam określanie takich właściwości jak „width” czy „height”, jako działania matematycznego łączącego różne jednostki.
Przykład:
div.rectangle1 {
width: calc(100% - 80px);
}
div.rectangle2 {
width: calc(10vh + 20vw);
}
div.rectangle3 {
width: calc(2*30vh);
}
Warto sprawdzić
Jak już jesteśmy przy temacie właściwości CSS, to warto sprawdzić jakie wsparcie dla poszczególnych jednostek oferują przeglądarki internetowe. Możemy to zrobić na stronie https://caniuse.com/
Tak na koniec należy pamiętać o odpowiednim ustawieniu wartości „box-sizing” dla elementów, których właściwości określamy w CSS. Wartość domyślna to „content-box”, mówi o tym, że określany wymiar elementu dotyczy tylko contentu w nim zawartego, bez paddingów, borderów itp. Drugą wartością która może przyjmować „box-sizing” jest „border-box”. Jest ona dużo częściej używana i zalecana do ustawienia. Daje to wiekszą łatwość określania rozmiarów w naszym dokumencie.
