Единицы измерения — px, em, % и прочая

Очень важный вопрос, напрямую касающийся темы предыдущей заметки.

Как задавать размеры шрифтов и прочих элементов в веб-строительстве?

Способов, точнее единиц существует множество, и все они, так или иначе, работают, делают свое незаметное дело, внося важнейший вклад в дизайн сайтов. Попробуем систематизировать.

1) Это «оффлайновые» единицы, которые используются в повседневной жизни или в типографских работах. Ведь да, верстка для веба — это прямая наследница типографского набора. Ничего особо нового придумывать было не нужно. Поэтому, не так и давно применялись миллиметры (mm), сантиметры (cm), пункты (pt) и пики (pc). Отголоском последних является стандартный размер стандартного шрифта во многих браузерах: 16 пикселей = 1 типографской пике. Применять эти единицы не имеет смысла, они никоим образом не завязаны на то, что выдаст монитор.

2) Старый добрый пиксель (px), основа основ, мельчайшая частица, на которой строится все веб-мироздание. Все так или иначе пересчитывается в пиксели. Прямо или косвенно.

Главная проблема в том, что сколько экранов, столько и пикселей. Физически размер пикселя на том или ином устройстве может разниться. И одинаковой картины отображения на всех девайсах мы получить не сможем. Поэтому пиксели потихоньку отходят на задний план, уступая место относительным единицам. [Я задумался над этой фразой и сентенция показалась мне алогичной. Что-то надо с этим делать… Если браузер выдает, скажем, 96 пикселей на дюйм всегда, то, угол, под которым текст останется читаемым, будет одинаков, разниться станет только расстояние, пропорциональное размеру пикселя у девайса… Ой… Тут еще непаханное поле для размышлений… Так что ставлю пометку -=-.]

3) em — единица сколь удобная, столь и коварная. Это относительная единица, которая «высчитывает себя», согласуясь с этим параметром у «родителя», т.е. оболочки, в которую элемент вложен. И очень многие начинающие разработчики, привыкшие, что, скажем, 16 пикселей, это, хоть бы и в сотом иерархически вложенном блоке, всегда 16 пикселей, сталкиваются со страшной картиной, когда один и тот же заданный размер шрифта на деле оказывается совершенно разным. Вот наглядный пример. Четыре вложенных дива, в каждом из которых размер шрифта задан как 0.9em. Каждый верхний является родителем нижнему.

Тот же самый пример с увеличением, размер шрифта задан как 1.1em:

Вот такая картина маслом. По стандарту, принятому во всех популярных браузерах, размер шрифта равняется 16 пикселям. Это и есть в стандартных случаях 1em. Однако, как правило, разработчик сайта делает ресет и сам задает подходящий параметр на body. Скажем, это выглядит как: font-size: 10px; font-size: 1em; В этом случае, один em Ивана Ивановича будет не совпадать с одним emом Ивана Никифоровича, который, допустим, не стал менять стандарт.

Тем не менее, em — это удобно для интуитивного масштабирования. Если четко знать, что во что вложено. Как правило считают от body, но могут быть варианты. Подход получается гибче, чем придумывать нужный размер шрифта в пикселях для каждого элемента конструкции.

4) То же самое делает «обычная» процентная запись — %. Но она чаще применяется не столько для шрифтов, сколько для отступов и расстояний. Подсчет может быть как от высоты/ширины родителя, так и от окна браузера. То есть вот тонкое различие, em считается от шрифта, процент считается не только от шрифта. Но суть та же — относительность. И единицы em и % взаимозаменяемы в большинстве случаев. Но я лично считаю, что em для шрифтовых работ, процент — для размеров и позиций.

5) Вообще-то, в среде фронтендеров разгораются совершенно нехилые срачи по поводу применения этих единиц измерения на практике, суровой практике, под дулом заказчиков, под гнетом порталов. И главный из них не столько пиксели против емов(процентов), сколько емы против ремов.

rem — относительная единица, которая строго берется от самого высшего родителя и не меняется(rem — root em). Обычно родитель это html. Все остальное в него вложенное — наследники, для которых rem един. Знакомый пример, где вместо .9em я задал .9rem:

Нагляднее некуда. Мы получили «относительный пиксель». Распространяемый линейно без изменений на всю иерархическую структуру.

Самое главное применение, это легкость глобального масштабирования текста. У нас есть один и только один параметр, который мы можем менять сколько взбредет: html {font-size: 10px;}. Все остальные .9rem, 5.5rem, 100rem будут отталкиваться, отсчитываться от него. И ситуации, когда нужно в поте лица менять десятки и даже сотни размеров, заданных разным элементам верстки в абсолютных пикселях, нас колыхать не будут.

Красиво?

5) Единицы внешней относительности. vw = 1% от ширины экрана, vh = 1% от высоты экрана устройства. Применяется для удобства масштабирования прежде всего в мобильных девайсах. В каких-то случаях это многое упрощает.

Н-да.. Так что же использовать на практике? Вообще-то все это можно сочетать. В особенности ремы и емы.

На закуску хитрость, старая добрая:
Чтобы не парить себе мозг, высчитывая, что такое 3.2rem(em) от 16 стандартных пикселей, многие применяют вот такую запись: body {font-size:62.5%}

Нетрудно подсчитать, что теперь 1 rem или em будет соответствовать 10 привычным пикселям. И 3.2em = 32px.

Почему не задать жестко 10px? Вопрос скорее этический, чем практический. Свобода пользователя. Оный может установить свой стандартный шрифт в браузере в любое значение, и наш выверенный дизайн исказится. Но это будет его выбор. Об осознанности этого выбора можно спорить. Так что — это все относительно.