Hloubkové porozumění velikosti písma (PX vs EM vs REM)

Porozumění velikosti písma

Velikost písma hraje velmi důležitou roli na webu, Velikost písma je jednou z vlastností CSS, Velikost písma nebo velikost textu definují, jak velké jsou znaky zobrazené na webové stránce. písmo se obvykle měří v bodech (pt) a obvykle se definuje v pixelech (px).

Podle výchozí hodnoty je základní velikost písma (Body Font-size) libovolné webové stránky 16px, dokud nedefinujeme vlastní vlastní velikost písma.
Vlastnost velikost písma je zadána jedním z následujících způsobů:

1. Absolutní velikost nebo relativní velikost
2. Jako délka nebo procento (vzhledem k velikosti písma nadřazeného prvku)

Základní syntaxe

Základní syntaxe písma

Absolutní velikost
xx-small, x-small, small, xx-large, x-large, large
Velikost písma s klíčovými slovy absolutní velikosti bude větší nebo menší vzhledem k velikosti písma nadřazeného prvku.

Relativní velikost
menší, větší

Délka-velikost
Velikost písma definovaná jako délka bude vždy kladná hodnota, použité jednotky relativního písma, jako jsou em a px

Procentní velikost
Velikost písma s procentem bude vždy kladná hodnota a relativní k velikosti písma nadřazeného prvku

Definujte velikost písma v těle

Definování velikosti písma v těle je nejlepším přístupem k vývoji jakékoli webové stránky. Nastavením velikosti písma klíčového slova na elementu těla můžete nastavit relativní velikost písma kdekoli na stránce, což vám umožní odpovídajícím způsobem přizpůsobit písmo nahoru nebo dolů na celé stránce.

Velikost písma v pixelech (Px)

Definování velikosti písma v Pixelu není dobrý postup. to bude dobré, pouze pokud spravujete dokonalý design pixelů.
 Pixel (px) je statická hodnota, px je nezávislý na operačním systému a křížový prohlížeč, který prohlížečům říká, aby vykreslily písmena v přesně zadaném počtu pixelů. Výsledky se mohou v různých prohlížečích mírně lišit, protože každý prohlížeč používá různé algoritmy a přístup k dosažení podobného účinku.
 Když definujete velikost písma v pixelech (px), můžete čelit psaní nějaké další CSS pro správu stránky v pohotovosti. a musíte psát css v každém bodu zlomu.

Velikost písma v EM

Dalším způsobem, jak definovat velikost písma, jsou hodnoty em. Velikost hodnoty em je dynamická. když v něm definujeme velikost písma, závisí to na velikosti nadřazeného prvku.
 Pokud jsme nenastavili velikost písma pro nadřazené, bude ve výchozím nastavení mít velikost písma prohlížeče, to je 16px.
 Nejdůležitější věcí, které byste měli vědět, je to, že vždy záleží na velikosti písma jeho rodiče. takže pokud definujete písmo ve vnořených prvcích, měli byste si to ponechat ve své mysli a nastavit velikost písma.

Převod pixelů na em

Velikost písma V REM

Hodnoty rem velikosti písma byly vynalezeny, aby se překonal problém em s vnořenými prvky.
 Hodnoty rem velikosti písma jsou relativní k kořenovému prvku html, nikoli k nadřazenému prvku, zbytek je stejný jako em.
 Níže je rozdíl mezi rem a em, pokud existují vnořené prvky.

Rozdíl mezi vnořenými prvky s EM a REM

Vnořený prvek s EMVnořený prvek s REM

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