Jednostki w CSS
Last updated
Was this helpful?
Last updated
Was this helpful?
Czy wiedzieliście, że w CSS możecie określić długość linii tekstu w liczbie znaków? Tak, jest . Te przeróżne jednostki przydają się nam do określenia wymiarów elementów (model pudełkowy!), a także rozmiaru fontu. Zapoznajmy się zatem z kilkoma najpopularniejszymi.
%
, czyli procenty. Możemy określać wymiary elementu w procentach. Będą one wtedy wyrażały te wymiary względem rodzica elementu (czyli kontenera, w którym dany element się znajduje). Procenty są przydatne, jeśli chcemy uzyskać elastyczny layout, którego elementy zmieniają wymiary płynnie wraz ze skalowaniem okna.
em
– podczas, gdy piksele reprezentują fizyczne piksele na ekranie i są jednostką bezwzględną, em
jest jednostką względną i odnosi się do rozmiaru fontu rodzica elementu. Jeśli nadamy elementowi rozmiar lub wielkość fontu równą 1em
, będzie to oznaczało, że wymiar ten jest równy rozmiarowi fontu jego bezpośredniego rodzica. Spójrzmy na przykład:
Jestem dziadkiem Jestem ojcem Jestem synem
Widzicie więc, że pomimo, iż każdy z elementów posiada identyczną wartość font-size
– 1.5em
– wynikowe wielkości się różnią. Na początku może się Wam to wydawać mało intuicyjne, jednak w miarę jak będziecie się stawać bardziej zaawansowani, odkryje się przed Wami bogactwo zastosowań dla em
.
rem
– również jest to jednostka względna. Jej nazwę można rozwinąć jako "root em
". Działa więc podobnie do em
z tą różnicą, że wartość wynikowa jest obliczana względem korzenia (root) drzewa dokumentu HTML. Zwykle oznacza to, że wartości rem
obliczane są względem wielkości fonta zadeklarowanego wewnątrz selektora html
.
Paragraf umieszczony w zewnętrznej sekcji.
Paragraf umieszczony w wewnętrznej sekcji.
vw
(ang. vieport witdh) oraz vh
(ang. viewport height). Są to jednostki dotyczące wysokości i szerokości okna przeglądarki. 1vw
oznacza 1/100
szerokości okna, a 1vh
– 1/100
wysokości okna.