laptop blog

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

Czas czytania: 3 minut

Jedną z najtrudniejszych rzeczy podczas budowania elementów strony w HTML i CSS jest dobieranie odpowiednich wielkości i szerokości. Przeważnie na stronach internetowych, ale nie tylko wymiary określane są w pikselach (px) lub procentach (%) jednak nie jest to jedyna spotykana jednostka.

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 jednej stronie internetowej czasem można spotkać nawet kilka typów jednostek. Co w pewnym momencie może doprowadzić do chaosu.?

O ile px są jednostką „stałą” interpretowaną w ten sam sposób w różnych miejscach tak w przypadku innych jednostek już tak być nie musi. Zapewne część z was pomyślała, że te jednostki działają podobnie jak kilometry i mile. I po części to dobry tok myślenia, jednak nie do końca. W dalszej części dowiecie się dlaczego.

Do jakich obiektów CSS możemy stosować jednostki?

Praktycznie do każdego oprócz np. body, *, html. W przypadku tych obiektów trzymała bym się pikseli. Dzięki czemu będziemy mieli pewność jaki jest nasz bazowy rozmiar. 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ększe lub mniejsze od normalnego fontu, czcionki.

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 (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.

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:
http://www.kurshtml.edu.pl/css/dlugosc,jednostki.html
https://www.w3schools.com/cssref/css_units.asp
https://itporady.pl/html-css/rozmiary-w-css-wzgledem-obszaru-roboczego-czyli-vw-vh-vmax-i-vmin/