Zrozumienie głębi rozmiaru czcionki (PX vs EM vs REM)

Zrozumienie rozmiaru czcionki

Rozmiar czcionki odgrywa bardzo ważną rolę w Internecie, Rozmiar czcionki jest jedną z właściwości css, Rozmiar czcionki lub rozmiar tekstu określa, jak duże są znaki wyświetlane na stronie internetowej. czcionka jest zwykle mierzona w punktach (pt) i zwykle definiowana w pikselach (px).

Przez podstawową wielkość czcionki (rozmiar czcionki) dowolnej strony internetowej wynosi 16px, dopóki nie zdefiniujemy własnego niestandardowego rozmiaru czcionki.
Właściwość font-size jest określana na jeden z następujących sposobów:

1. Rozmiar absolutny lub względny
2. Jako długość lub procent (w stosunku do rozmiaru czcionki elementu macierzystego)

Podstawowa składnia

Podstawowa składnia czcionki

Rozmiar absolutny
xx-small, x-small, small, xx-large, x-large, large
Rozmiar czcionki ze słowami kluczowymi o rozmiarze bezwzględnym będzie większy lub mniejszy w stosunku do rozmiaru czcionki elementu nadrzędnego.

Względna wielkość
mniejszy, większy

Długość-rozmiar
Długość czcionki zdefiniowana zawsze będzie wartością dodatnią, zastosowane jednostki zależne od czcionki, takie jak em i px

Rozmiar procentowy
Rozmiar czcionki z procentem zawsze będzie wartością dodatnią i będzie zależał od rozmiaru czcionki elementu nadrzędnego

Zdefiniuj rozmiar czcionki w treści

Zdefiniowanie rozmiaru czcionki w treści jest najlepszym podejściem do opracowania dowolnej strony internetowej. Ustawiając rozmiar czcionki słowa kluczowego w elemencie body, możesz ustawić względny rozmiar czcionki wszędzie na stronie, co daje możliwość łatwego skalowania czcionki odpowiednio w górę lub w dół na całej stronie.

Rozmiar czcionki w pikselach (Px)

Definiowanie rozmiaru czcionki w pikselach nie jest dobrą praktyką. będzie to dobre, jeśli zarządzasz perfekcyjnym projektem piksela.
 Piksel (px) to wartość statyczna, px to niezależna od systemu operacyjnego przeglądarka internetowa, która nakazuje przeglądarkom renderowanie liter o dokładnie określonej liczbie pikseli. Wyniki mogą się nieznacznie różnić w różnych przeglądarkach, ponieważ każda przeglądarka używa różnych algorytmów i podejścia, aby osiągnąć podobny efekt.
 Po zdefiniowaniu rozmiaru czcionki w pikselach (px) możesz napotkać dodatkowe css, aby szybko zarządzać stroną. i musisz pisać css w każdym punkcie przerwania.

Rozmiar czcionki w EM

Innym sposobem definiowania rozmiaru czcionki jest użycie wartości em. Rozmiar wartości em jest dynamiczny. kiedy definiujemy rozmiar czcionki w nich, zależy to od rozmiaru elementu nadrzędnego.
 jeśli nie ustawiliśmy rozmiaru czcionki dla elementu nadrzędnego, wówczas domyślnie wybierze rozmiar czcionki przeglądarki, czyli 16 pikseli.
 Najważniejszą rzeczą, jaką należy o nich wiedzieć, jest to, że zawsze zależy to od rozmiaru czcionki rodzica. więc jeśli definiujesz czcionkę w zagnieżdżonym elemencie, powinieneś o tym pamiętać, aby ustawić rozmiar czcionki.

Konwersja pikseli na em

Rozmiar czcionki w REM

Wartości rem wielkości czcionki zostały wymyślone w celu rozwiązania problemu z zagnieżdżonymi elementami.
 Wartości rem wielkości czcionki odnoszą się do głównego elementu HTML, a nie do elementu nadrzędnego, reszta jest taka sama jak em.
 Poniżej znajduje się różnica między rem i em, jeśli są zagnieżdżone elementy.

Różnica między elementami zagnieżdżonymi za pomocą EM i REM

Element zagnieżdżony z EMElement zagnieżdżony z REM

Patrz: https://developer.mozilla.org/en-US/docs/Web