Jednostki CSS
Podczas poprzednich lekcji wielokrotnie korzystaliśmy z dwóch bardzo popularnych jednostek występujących w CSS, czyli px oraz %. Dzięki nim opisywaliśmy m.in. wymiary znaczników (np. width, height) lub wartości charakterystyczne dla box modelu (padding, margin, border). W CSS mamy do dyspozycji dużo więcej jednostek, które znajdą swoje zastosowanie w różnych scenariuszach. Wszystkie te jednostki dzielą się na dwie podstawowe grupy:
- bezwzględne (absolutne, ang: absolute)
- względne (relatywne, ang: relative)
Jednostki bezwzględne (absolutne)
Jednostki te mają swoje stałe, niezmienne wymiary. Przykładami takich jednostek mogą być cm (centymetry) lub px (piksele). Niezależnie od tego na jak dużym ekranie będzie wyświetlać element na stronie opisany tymi jednostkami, to zawsze będzie to dokładnie ten sam rozmiar. Jednostki takie są dość kłopotliwe w przypadku tworzenia stron responsywnych, czyli takich, które dostosowują wymiary swoich elementów do rozmiaru ekranu. Wszystkie jednostki bezwzględne zostały zebrane w poniższej tabeli:
| Jednostka bezwzględna | Opis |
|---|---|
| px (piksel) | 1px = ok. 0.03cm |
| pt (point) | 1pt = ok. 0.035cm |
| pc (pica) | 1pc = 12pt |
| cm (centymetr) | 1cm = 10mm |
| mm (milimetr) | 1mm = 0.1cm |
| in (inch, cal) | 1in = 2.54cm |
Jednostek bezwzględnych będziemy używali tam, gdzie responsywność nie jest dla nas ważnym czynnikiem. Zdecydowanie najczęściej używaną jednostką w tej grupie (jak i prawdopodobnie w całym CSS) jest oczywiście piksel. Jednsotki takie jak centymetr, milimetr bądź cal najczęściej będą użyteczne w sytuacjach, gdzie tworzymy stronę, która będzie miała możliwość wydruku – wtedy za pomocą tych jednostek możemy ustalać wymiary pasujące pod różne rozmiary kartek (A4, A3 itp.).
Jednostki względne (relatywne)
Skoro jednostki absolutne nie nadawały się za bardzo do stron responsywnych, to znaczy, że jednostki relatywne są wręcz dla nich stworzone. Jednostki te są uzależnione od rozmiaru swojego “rodzica” bądź ekranu, na którym są wyświetlane. Dzięki temu zwiększają one swoje wartości wraz ze zwiększaniem rozmiaru ekranu i vice versa. Ich użycie jest nieco bardziej skomplikowane niż jednostek absolutnych, więc opiszmy sobie je dokładnie w poniższej tabeli:
| Jednostka względna | Opis |
|---|---|
| % (procent) | Wartość procentowa odnosząca się do rodzica. Przykładowo
width: 50% oznacza, że element będzie miał szerokość
ustawioną na połowę aktualnej szerokości swojego rodzica. |
| em | Wartość odnosząca się (proporcjonalna) do rozmiaru czcionki rodzica wybranego elementu. 1em = aktualny rozmiar czcionki ustawiony na rodzicu. |
| rem | Wartość odnosząca się (proporcjonalna) do rozmiaru czcionki ustawionej
na tagu <html> (“rem” = “root em”). 1rem = aktualny
rozmiar czcionki na tagu <html> |
| ch (character) | Wartość określająca szerokość pojedynczego znaku. Jak znak wzorcowy wybrany jest znak “zero” (0) aktualnie używanej czcionki. |
| vh (viewport height) | Jednostka proporcjonalna do wysokości okna przeglądarki. Wartość
height: 100vh oznacza wysokość równą 100% wysokości okna
przeglądarki. |
| vw (viewport width) | Jednostka proporcjonalna do szerokości okna przeglądarki. Wartość
width: 100vw oznacza szerokość równą 100% szerokości okna
przeglądarki. |
| vmin | Jednostka równa mniejszej z wartości vh oraz
vw. Przykładowo w telefonie trzymanym w “normalnej”
pozycji, szerokość otwartej na nim przeglądarki jest mniejsza niż
wysokość. W tym przypadku vmin = vw |
| vmax | Jednostka równa większej z wartość vh oraz vw.
Używając przykładu z telefonem, vmax = vh |
| ex | Wartość określająca wysokość pojedynczego znaku. Jak znak wzorcowy wybrany jest znak “x” (mała litera) aktualnie używanej czcionki. |
Zobaczmy teraz te wszystkie jednostki w praktyce:
Na poniższym krótkim wideo możemy zauważyć, jak zachowują się powyższe jednostki podczas zmiany szerokości ekranu. Widzimy, iż szerokości elementów wyrażone w jednostkach bezwzględnych są całkowicie obojętne na aktualną szerokość okna przeglądarki. W momencie, gdy element na stronie jest szerszy niż okno, wtedy pojawia nam się możliwość poziomego przesuwania strony, co nie jest zbyt wygodne dla użytkownika.
Z kolei elementy względne skalują się odpowiednio do szerokości strony. Dotyczy to zarówno szerokości elementów, jak i rozmiaru czcionki, której rozmiar został uzależniony od szerokości okna. Jak to wygląda w praktyce można zauważyć na poniższym video:
Masz pytania lub uwagi?
Przejdź na Discord