Jednostki miar w CSS

Tworząc różne elementy na stronie będziecie chcieli nadać im odpowiedni wygląd – np. wielość czcionki, wysokość, szerokość, grubość obramowania czy podkreślenia albo odstępy między elementami. Jak to zrobić? Z pomocą przychodzą odpowiednie właściwości css w których używa się różnych jednostek miar. Tylko, która jednostka będzie odpowiednia?

Jednostki bezwzględne

  1. cm – wartość podawana w centymetrach
  2. mm – wartość podawana w milimetrach
  3. in – wartość podawana w calach (1 cal to 2.54 cm)
  4. pt – wartość podawana w punktach (1 punkt to 1/72 cala) – wywodzi się z typografii i używana jest głównie do druku
  5. pc – wartość podawana w pika (1 pika to 12 punktów) – tak samo jak punkt wywodzi się z typografii
  6. px – wartość podawana w pixelach

 

Jednostki względne

  1. em – wartość zależna od wielkości czcionki danego elementu
  2. rem – wartość zależna od wielkości czcionki tagu <html>
  3. ex – wartość zależna od wysokości litery x w czcionce
  4. ch – wartość zależna od wysokości cyfry 0 w czcionce
  5. % – wartość podawana w procentach – zależne wielkości elementu nadrzędnego

 

Czym się różnią?

Jeśli użyjemy wybranej bezwzględnej jednostki miary to dokładnie tyle otrzymamy. Weźmy na warsztat taki przykład

Do naszych obliczeń przyjmijmy, że element <body> ma ustawiony rozmiar czcionki (font-size) na 10px i samą czcionkę (font-family) Arial.

Jeśli obrazkowy ustawimy szerokość np. 5 cm to zawsze będzie miał 5 cm szerokości. Natomiast z jednostkami względnymi będzie inaczej.

Ustawiając obrazkowi szerokość na 10em otrzymamy 100px szerokości, ponieważ 1em odpowiada w tym przypadku 10 pixelom – 1em to tyle pixeli ile ma rozmiar czcionki obrazka a że elementy dziedziczą po sobie to i div i obrazek mają rozmiar czcionki 10px.

Natomiast jeśli <body> będzie mieć rozmiar czcionki 20px to 1em wyniesie 20px a nasz obrazek będzie miał 200px szerokości.

 

Wróćmy do rozmiaru czcionki 10px i szerokości obrazka 10em. Jeśli z jakiegoś powodu naszemu divowi ustawimy rozmiar czcionki to ten rozmiar również wpłynie na szerokość obrazka. Ustawiając ten rozmiar czcionki na 2em szerokość obrazka wyniesie 200px. Dlaczego? Otóż body ma 10px a 2em to 2 * 10px = 20px (nasz div). Obrazek ma 10em czyli 10 * 20px (dziedziczone z diva) = 200px.

 

Na takiej samej zasadzie działają jednostki ex i ch tylko, że 1ex lub 1ch nie równa się dokładnej wielkości czcionki. W naszym pierwszy przykładzie z em body ma font-size 10px a obrazek ma szerokość 10em co daje 100px – 1em to 10px. Ustawiając szerokość na 10ex otrzymamy 51.84px co daje nam 1ex = 5.184px

 

Dla ch wygląda to następująco: 10ch daje nam 55.61px serokości – 1ch to 5.561px

 

Kolejna z jednostek względnych to rem. Działa na takiej zasadzie jak em z tą różnicą, że bierze pod uwagę rozmiar czcionki ustawiony tylko dla elementu <html>. Przy em rozmiary „kumulowały się” (przykład z ustawieniem rozmiaru czcionki dla diva – body (10px) * div (2em) = img (200px)). Przy rem mamy tylko html:

10rem daje nam 100px szerokości – font-size 10px * 10rem. Ustawiając rozmiar czcionki dla diva na 20rem (czy jakąkolwiek inną liczbę) dalej będziemy mieli 100px szerokości:

 

I na koniec została ostatnia jednostka miary – procenty (%). Zmodyfikujmy nieco nasz przykład, ponieważ procenty dla szerokości naszego obrazka bazują na szerokości diva i dlatego nie potrzebujemy już cssów związanych z html czy body.

Ustawiając szerokość obrazka na 50% gdy div ma szerokości 500px otrzymamy 250px szerokości dla obrazka. Zgadza się dokładnie 50% – połowa. Jeśli zmienimy szerokość diva na 300px to nasz obrazek będzie miał szerokość 150px.

 

Kiedy jakie jednostki używać? Nie ma na to jednoznacznej odpowiedzi. Jednostki pt i pc używa się głównie do druku ale nikt Wam nie broni użyć ich w innym celu. Mogę tylko podpowiedzieć, że warto stosować em, rem i procenty, które świetnie się sprawdzają przy tworzeniu responsywnej strony. Dzięki temu ograniczymy kod css i zyskamy tym samym czas. Dlaczego? Weźmy przykład strony, która ma nagłówki (h1) i akapity (p). Przypisując im rozmiary czcionek w np. pixelach będziecie musieli to samo zrobić dla wersji responsywnej (po kilka wartości dla różnych rozdzielczości). Używając em i rem przypisujecie rozmiary nagłówkom i akapitom tylko raz a dla wersji responsywnej zmieniacie rozmiar czcionki np. tylko dla body. Przy rozbudowanych szablonach jest to duża oszczędność i wygoda.

 

A Wy jakich jednostek najczęściej używacie?

 

PS Mam nadzieję, że opisałem wszystko na tyle jasno, że nie będzie problemu ze zrozumieniem. Jeśli jednak nie to zostawcie komentarz, żebym mógł wyjaśnić wątpliwości i ew. nanieść poprawki 🙂