Jednostki stosowane w CSS (px, %, em, cm, in)

Czas czytania: 3 minut

Jedną z najtrudniejszych rzeczy podczas budowania strony internetowej jest dobieranie odpowiednich wymiarów elementów. A konkretnie ich wielkości i szerokości tak by strona wyglądała dobrze.

Przeważnie na stronach internetowych, ale nie tylko do określenia wymiarów korzysta się z jednostek takich jak: piksele (px) oraz procentów (%). To jednak nie są jedyne jednostki jakie do tego celu są stosowane.

Co wypada wiedzieć o jednostkach miary

CSS posiada kilka różnych jednostek z pomocą, których możemy manipulować obiektami na na stronie (HTML). Na niektórych stronach stosuje się czasem nawet więcej niż jeden typ jednostek. Co w pewnym momencie może doprowadzić do chaosu! Do tego typu sytuacji może dojść kiedy korzystamy z jednostek, w zupełnie przypadkowy sposób.

O ile px są jednostką „stałą” (bezwzględną) interpretowaną w ten sam sposób w różnych miejscach. Nie nie musi być jednak tak samo w przypadku innych jednostek jakie możemy użyć na stronie.

Jakim obiekty HTML możem nadawać wymiary z pomocą CSS?

W praktyce każdemu. Chociaż nie zaleca się do każdego z nich używać dowolnych jednostek miar. Chodzi o elementy takie jak np. body, *, html. W ich przypadku lepiej używać pikseli (np. do tekstu, maksymalnej szerokości) lub procentów (np. do szerokości) – dzięki czemu mamy lepszą kontrolę nad ich zachowaniem.

Przykładowe własności CSS gzie możemy „bawić” się jednostkami:

  • width,
  • margin,
  • padding,
  • font-size,
  • border-width
  • itp.

Jednostki stosowane CSS (ang. CSS Units)

W większości przeglądarki nie mają większego problemu z interpretacją popularnych wymiarów określanych w CSS. Jednak w przypadku mniej popularnych (choć czasami bardzo użytecznych wygląda to nieco inaczej).

Nazwa jednostkiChromeInternet ExplorerFirefoxSafariOpera
em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5
ch27.09.01.07.020.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.09.0*19.06.020.0
vmax26.0Nie wspiera19.07.020.0
źródło: https://www.w3schools.com/cssref/css_units.asp

Jak widać mamy całkiem sporo tych jednostek. Jednostki te możemy podzielić dwa typy: względne i bezwzględne. Jest to bardzo istotna informacja podczas użytkowania z nich.

Jednostki względne (relatywne)

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. Podział ten wynika ze względu na to w stosunku do jakiego elementu dostosowuje się obiekt.

Względem elementu głównego

Do tej grupy zaliczają się jednostki takie jak:

  • em – wysokość jest obliczana względem aktualnej wielkości fontu/potocznie czcionki (np. 3em to 3 krotność aktualnie używanego czcionki elektronicznej)
  • ex – wysokość litery „x”, czyli małej litery w aktualnej czcionce (rzadko używana)
  • ch – względem szerokości „0” (zero)
  • rem – względem rozmiaru fontu elementu głównego (czyli znacznika <html>)

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.

Poniżej możecie zobaczyć porównanie jednostek REM z EM w praktyce.

See the Pen
CSS Units
by Aura (@Julka85)
on CodePen.0

Względem okna przeglądarki

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ądarki
  • vh – procentowa wysokość obszaru wyświetlania – względem wysokości okna przeglądarki
  • vmin – mniejsza z wartości vw lub vh
  • vmax – 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.

Jednostki względne a RWD

Tak jak już napisałam obiekty z tymi jednostkami dostosowują się do obiektów nadrzędnych. W praktyce więc ewentualne modyfikacje pod kontem RWD często ograniczają się jedynie do manipulacji głównym obiektem a nie jednostką.

Co nie oznacza, że nigdy nie spotkamy się z przypadkiem gdy trzeba będzie zmienić wartość jednostki bo będzie za duża lub za mała.

Jednostki bezwzględne

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 – centymetry
  • mm – milimetry
  • in – cale (1in = 96px = 2.54cm)
  • px – piksele (1px = 1/96th of 1in)
  • pt – punkty (1pt = 1/72 of 1in)
  • pc – picas (1pc = 12 pt)

Jednostki bezwzględne a RWD

W tym wypadku to my musimy pilnować czy rozmiar obiektu na pewno nie jest za duży. Obiekty pozostają w stałych wielkościach bez problemu mogą więc być za szerokie lub za wysokie. Dlatego to my musimy pilnować by do takich sytuacji nie dochodziło.

Podsumowanie

Jak widzicie trochę tych jednostek istnieje. Teraz pojawia się pytanie, których używać? Jeśli korzystacie z gotowych bibliotek CSS takich jak Bootstrap to najlepiej skorzystać z tych samych jednostek co biblioteka. W przypadku Bootstrap są to px, % i rem.

Chociaż sama używam em.? Jakoś bardziej do mnie przemawia.

Jeżeli sami budujecie stronę od podstaw to polecam px, % i właście em zamiast rem. Jednak nikogo nie zmuszam a zachęcam do sprawdzenia co lepiej działa.

źródła: