Разуменне глыбіні памеру шрыфта (PX супраць EM супраць REM)

Разуменне памеру шрыфта

Памер шрыфта гуляе вельмі важную ролю ў Інтэрнэце, памер шрыфта - адно з уласцівасцей CSS, памер шрыфта або памер тэксту вызначаюць тое, наколькі вялікія сімвалы адлюстроўваюцца на вэб-старонцы. шрыфт звычайна вымяраецца ў кропках (pt) і звычайна вызначаецца ў пікселях (px).

Пры зняволенні базавага памеру шрыфта (памеру шрыфта цела) любой вэб-старонкі будзе 16 пікселяў, пакуль мы не вызначым уласны памер шрыфта.
Уласцівасць памеру шрыфта вызначаецца адным з наступных спосабаў:

1. Абсалютны памер або адносны памер
2. У якасці даўжыні або адсотка (у залежнасці ад памеру шрыфта бацькоўскага элемента)

Базавы сінтаксіс

Базавы сінтаксіс шрыфта

Абсалютны памер
xx-малы, x-маленькі, маленькі, xx-вялікі, x-вялікі, вялікі
Памер шрыфта з ключавымі словамі абсалютнага памеру будзе большы ці меншы ў параўнанні з памерам шрыфта бацькоўскага элемента.

Адносны памер
меншы, большы

Даўжыня-памер
Памер шрыфта, вызначаны ў даўжыню, заўсёды будзе станоўчым значэннем, выкарыстоўваецца адносная шрыфтавая адзінка, напрыклад em і px

Працэнт-памер
Памер шрыфта з адсоткамі заўсёды будзе станоўчым і адносна памеру шрыфта бацькоўскага элемента

Вызначце памер шрыфта ў целе

Вызначэнне памеру шрыфта ў корпусе - лепшы падыход для распрацоўкі любой вэб-старонкі. Устанавіўшы памер шрыфта ключавога слова на элеменце цела, вы можаце ўсталяваць адноснае змяненне памеру шрыфта ўсюды на старонцы старонкі, што дазваляе вам лёгка маштабаваць шрыфт уверх ці ўніз на ўсёй старонцы адпаведна.

Памер шрыфта ў пікселях (Px)

Вызначэнне памеру шрыфта ў Pixel не з'яўляецца добрай практыкай. гэта будзе добра толькі ў тым выпадку, калі вы кіруеце піксельным ідэальным дызайнам.
 Піксель (px) - гэта статычнае значэнне, px - незалежны ад АС і крос-браўзэр, які паведамляе браўзэрам адлюстроўваць літары роўна ў той колькасці пікселяў у вышыню, якую вы паказалі. Вынікі могуць нязначна адрознівацца ў розных браўзэрах, бо кожны браўзэр выкарыстоўвае розныя алгарытмы і падыход, каб дасягнуць падобнага эфекту.
 Калі вы вызначаеце памер шрыфта ў пікселі (px), вы можаце сутыкнуцца з напісаннем дадатковага CSS, каб кіраваць старонкай спагадліва. і вы павінны пісаць CSS у кожным пункце перапынку.

Памер шрыфта ў EM

Іншы спосаб вызначэння памеру шрыфта - гэта значэнні em. Памер значэння em з'яўляецца дынамічным. калі мы вызначаем памер шрыфта ў em, гэта залежыць ад памеру бацькоўскага элемента.
 калі мы не ўсталявалі памер шрыфта для бацькоўскага, то па змаўчанні ён будзе прымаць памер шрыфта браўзэра, гэта 16px.
 Самае галоўнае, што трэба ведаць з em, - гэта заўсёды залежыць ад памеру шрыфта яго бацькі. так што калі вы вызначаеце шрыфт укладзеных элементаў, то вам варта памятаць, каб усталяваць памер шрыфта.

Ператварэнне пікселяў у em

Памер шрыфта ў REM

Значэнні памеру шрыфта былі вынайдзены, каб пераадолець праблему em з укладзенымі элементамі.
 Значэнні rem памеру шрыфта адносяцца да каранёвага элемента html, а не да бацькоўскага элемента, у астатнім усё тое ж, што і em.
 Ніжэй размешчана паміж rem і em, калі ёсць укладзеныя элементы.

Розніца паміж укладзенымі элементамі з EM і REM

Укладзены элемент з ЭМУкладзены элемент з REM

Спасылка: https://developer.mozilla.org/en-US/docs/Web