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 🙂
Dlaczego przeglądarki mobilne ignorują interlinię?
Czy wstawię px, em, %, pt to interlinia jest na PC, a na mobilnej przeglądarce jedno na drugim (praktycznie nie widać zmiany)