• Home
  • CSS
  • Rem, em – jednostki miary w css

Rem, em – jednostki miary w css



Przyznam, że rzadko korzystam z takich jednostek miary jak rem i em. Zazwyczaj używam pikseli (px), bo jakoś łatwiej mi skojarzyć, jaki rozmiar będzie posiadać dany element.

Jednostki rem i em, w przypadku czcionek, mają jednak jedną przewagę nad pikselami – mogą być ustawione w korelacji do wielkości czcionki rodzica (em) lub roota (najczęściej jest nim element <html> – rem). Daje to możliwość manimulowania rozmiarami dla wielu elementów na raz. Domyślna wartość rozmiaru czcionki dla roota to zazwyczaj 16px (ale to zależy od przeglądarki).

Jednostka em

Używając jednostki em możemy ustawić wielkość czcionki dziecka na określoną część wielkości czcionki rodzica. Przykład:

See the Pen em by Joanna (@JoannaEl) on CodePen.

W efekcie, w powyższym przykładzie wielkość czcionki elementu Child1 będzie o 50% większa niż wielkość czcionki Parent, a wielkość czcionki Child2 jest o 50% większa niż wielkośc czcionki Child1 .

Jednostka rem

Elementy, dla których używana jest jednostka rem są zawsze w korelacji z rootem – najczęściej jest to element html. Możemy więc ustawić wartość czcionki bazowej w roocie odwołując się do elementu html lub elementu :root.

See the Pen rem by Joanna (@JoannaEl) on CodePen.

W powyższym przykładzie paragraf 1 posiada 50% wielkości czcionki elementu html, a paragraf 2 jest o 25% mniejszy niż wielkość czcionki html.

W przypadku rem-ów wystarczy zmienić wartość czcionki „bazowej” w roocie, aby zmienić wielkość wszystkich czcionek na stronie – prosto i szybko 🙂

Joanna

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *