Jednostki w CSS możemy podzielić na dwie podstawowe kategorie:
Jednostki względne wykorzystujemy, gdy chcemy dostosować się rozmiaru innego elementu. Czyli np. ustawić rozmiary nagłówków odpowiednio większy lub mniejszy od reszty tekstu na stronie.
Tę grupę możemy podzielić na 2 podgrupy, który wynika z tego do jakiego elementu dostosowuje się obiekt.
em – wysokość jest obliczana względem aktualnej wielkości fontu/potocznie czcionki (np. 3em to 3 krotność aktualnie używanego czcionki elektronicznej)rem – względem rozmiaru fontu elementu głównego (czyli znacznika )ex – wysokość litery „x”, czyli małej litery w aktualnej czcionce (rzadko używana)
Obiekty posiadające rozmiary opisane w ten sposób będą ulegać zmianie wraz z obiektem nadrzędnym.
Czyli np. w momencie gdy na tablecie będziemy chcieli mieć podstawowy rozmiar fontu zamiast 18px np. 16px.
To bez naszej ingerencji rozmiary pozostałych elementów się zmienią, dostosowując się do nadrzędnego.
Do tej grupy zaliczają się również wymiary dostosowujące się do wymiarów okna przeglądarki internetowej:
vw – procentowa szerokość obszaru wyświetlania – względem szerokości okna przeglądarkivh – procentowa wysokość obszaru wyświetlania – względem wysokości okna przeglądarkivmin – mniejsza z wartości vw lub vhvmax – większa z wartości vw lub vh%
Tutaj obiektem nadrzędnym jest sama przeglądarka.
To do jej rozmiarów font samodzielnie się dostosowuje.
W efekcie ten sam tekst na dużym monitorze może być olbrzymi a na tablecie mały.
Są to jednostki o stałych wymiarach. Ewentualne zmiany w rozmiarze są wynikiem sposobu interpretacji przeglądarki i raczej powinny być niewielkie.
Do tej grupy zaliczamy:
cm – centymetrymm – milimetryin – cale (1in = 96px = 2.54cm)px – piksele (1px = 1/96th of 1in)pt – punkty (1pt = 1/72 of 1in)pc – picas (1pc = 12 pt)