Разбиране на дълбочината на размера на шрифта (PX срещу EM срещу REM)

Разбиране на размера на шрифта

Размерът на шрифта играе много важна роля в мрежата, Размерът на шрифта е едно от css свойствата, Размерът на шрифта или размера на текста определят колко големи знаци се показват на уеб страница. шрифтът обикновено се измерва в точки (pt) и обикновено се дефинира в пиксел (px).

Като обезвредим основния размер на шрифта (размер на шрифта на тялото) на всяка уеб страница е 16px, докато не дефинираме собствен собствен размер на шрифта.
Свойството за размер на шрифта се определя по един от следните начини:

1. Абсолютен размер или Сравнителен размер
2. Като дължина или процент (спрямо размера на шрифта на родителския елемент)

Основен синтаксис

Основен синтаксис на шрифта

Абсолютен размер
xx-малък, x-малък, малък, xx-голям, x-голям, голям
Размерът на шрифта с ключови думи с абсолютен размер ще бъде по-голям или по-малък спрямо размера на шрифта на родителския елемент.

Относително размер
по-малък, по-голям

Дължина размер
Размерът на шрифта, определен по дължина, винаги ще бъде положителна стойност, използвани единици, свързани с шрифта, като em и px

Процент размер
Размерът на шрифта с Процент винаги ще бъде положителна стойност и спрямо размера на шрифта на родителския елемент

Определете размера на шрифта в тялото

Определянето на размера на шрифта в тялото е най-добрият подход за разработване на всяка уеб страница. Чрез задаване на размер на шрифта на ключова дума върху елемента на тялото, можете да зададете относително оразмеряване на шрифта навсякъде другаде на страницата, като ви дава възможност лесно да увеличавате съответно шрифта нагоре или надолу по цялата страница.

Размер на шрифта в пиксели (Px)

Определянето на размера на шрифта в Pixel не е добра практика. това ще бъде добре само ако управлявате перфектния дизайн на пикселите.
 Pixel (px) е статична стойност, px е независима от ОС и крос-браузъра, който казва на браузърите да представят буквите точно на броя пиксели във височина, който сте посочили. Резултатите могат да варират леко в различните браузъри, тъй като всеки браузър използва различни алгоритми и подход за постигане на подобен ефект.
 Когато дефинирате размер на шрифта в пиксел (px), може да се изправите да напишете допълнителен css за управление на страницата с отзивчивост. и трябва да напишете css във всяка точка на почивка.

Размер на шрифта в EM

Друг начин за определяне на размера на шрифта е със стойности em. Размерът на стойност em е динамичен. когато определим размера на шрифта в em, това зависи от размера на родителския елемент.
 ако не сме задали размера на шрифта за родителя, тогава по подразбиране той ще вземе размера на шрифта на браузъра, тоест 16px.
 Най-важните неща, които трябва да знаете с em е, че винаги зависи от размера на шрифта на неговия родител. така че ако определяте шрифта в вложен елемент, тогава трябва да го имате предвид, за да зададете размера на шрифта.

Преобразуване на пиксел в em

Размер на шрифта в REM

Стойностите на rem шрифт са измислени, за да се преодолее проблемът с em с вложени елементи.
 Стойностите на rem-размер на шрифта са относителни към коренния html елемент, а не към родителския елемент, останалото всичко е същото като em.
 По-долу е различното между rem и em, ако има вложени елементи.

Разлика между вложени елементи с EM и REM

Вложен елемент с ЕМВложен елемент с REM

Реф: https://developer.mozilla.org/en-US/docs/Web