Все единицы измерения css

Единицы измерения: px, em, rem и другие

В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

• Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

• 1mm (мм) = 3.8px
• 1cm (см) = 38px
• 1pt (типографский пункт) = 4/3 px
• 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

 
Страусы 
Живут также в Африке
 

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.

А вот аналогичный пример с em вместо px :

 
Страусы 
Живут также в Африке
 

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .

Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква «x» и ноль «0» . В этом случае они носят более условный характер.

Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с % , он выглядит в точности так же, как с em :

 
Страусы 
Живут также в Африке
 

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

• px – абсолютные, чёткие, понятные, не зависящие ни от чего.
• em – относительно размера шрифта.
• % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

Вроде бы, использовать можно, однако есть проблема.

Протестируем на таком списке:

Источник

Единицы измерения CSS — PX, EM, REM, %, VW, VH, VMIN, VMAX, FR, EX, CH

Абсолютная единица — не зависит от значений других свойств. Ее можно назвать еще фиксированной или окончательной.

Относительная единица — зависит от того или иного значения других свойств.

PX — пиксели

Абсолютная (фиксированная) единица. Значение заданное в пикселях (px), четкое и понятное.

Как правило, в макетах дизайна мы видим размеры именно в пикселях. Поэтому, используя эту единицу мы легко можем переносить данные в код с точностью пиксель перфект. Это когда макетные размеры совпадают с версткой на все 100%.

Остальные единицы, так или иначе пересчитываются браузером все равно в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px.

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 
Обычный текст 
Привет! Это Фрилансер по жизни! 
Живи, а работай в свободное время! 
Подписывайся!
 
Ставь лайк!
 
И комментарий напиши!
 
 
 

Преимущества

Недостатки

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

EM – относительна размеру шрифта

Относительная единица. Размер формируется относительно текущего или унаследованного размера шрифта (font-size).
1em равен значению font-size.

Как мы знаем, свойство размера шрифта font-size наследуется потомками. Поэтому, указывая тот или иной размер в EM нужно четко понимать какой размер шрифта влияет на данный элемент.
Как и пиксели, значение EM можно указывать дробные.

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 
Обычный текст 
Привет! Это Фрилансер по жизни! 
Живи, а работай в свободное время! 
Подписывайся!
 
Ставь лайк!
 
И комментарий напиши!
 
 
 

Преимущества

Относительность EM позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Отлично подходит для указания размеров зависящих от размера шрифта. Также используется в медиа запросах.

Недостатки

по сравнению с PX, работать с EM более сложно, ведь для переноса данных из макета в единицы в EM требуются вычисления.

REM — относительна размеру шрифта браузера

Относительная единица. Размер формируется относительно размера шрифта (font-size) в теге или браузера по умолчанию.
1rem равен значению font-size в теге или браузера по умолчанию.
Можно указывать дробные числа, например 1.5rem

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 
Обычный текст 
Привет! Это Фрилансер по жизни! 
Живи, а работай в свободное время! 
Подписывайся!
 
Ставь лайк!
 
И комментарий напиши!
 
 
 

Преимущества

Относительность REM позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Более простое использование. Отлично подходит для указания размеров шрифтов.

Недостатки

По сравнению с PX, работать с REM более сложно, ведь для переноса данных из макета в единицы в REM требуются вычисления, но проще чем с EM.

% — проценты от .

Относительная единица. Можно указывать дробные числа, например 10.5%. Разные CSS свойства вычисляют процент относительно разных значений:

• Ширина width — относительно ширины родительного элемента
• Высота height — относительно высоты родительного элемента, но только если у него задана высота либо это флекс или грид элемент.
• При относительном позиционировании (position: relative; + top left bottom right) нужны те же условия.
• Для абсолютно позиционированных объектов — относительно высоты родительского элемента. При этом, задавать высоту родителю не обязательно.
• Отступы padding \ margin — относительно ширины родительного элемента, даже если задаются вертикальные отступы.
• transform: translate(x, y) — относительно ширины \ высоты самого объекта к которому применено свойство.
• font-size и line-height — относительно размера свойства font-size

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 
Обычный текст 
Привет! Это Фрилансер по жизни! 
Живи, а работай в свободное время! 
Подписывайся!
 
Ставь лайк!
 
И комментарий напиши!
 
 
 

Внутренние отступы: 400/100*5 = 20px

Внешние отступы: 400/100*5 = 20px

Внутренние отступы: 400/100*5 = 20px

Внутренние отступы: 400/100*5 = 20px

Преимущества

Относительность процентов позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Отлично подходит для построения относительных конструкций и позиционирования объектов.

Недостатки

Требуют хорошего знания теории и четкого понимания — процент от чего вычислятестя в тот или иной момент

VW, VH, VMIN, VMAX — относительно окна (вьюпорта) браузера

Все они так или иначе работают относительно окна браузера, так называемого вьюпорта.
Вьюпорт, простыми словами, это вот эта рамка через которую мы просматриваем сайт.

Итак VW работает относительно ширины вьюпорта, VH относительно высоты вьюпорта.
VMIN — относительно наименьшего значения из (VW, VH). VMAX — относительно наибольшего значения из (VW, VH).

100vw равно ширине окна браузера (вьюпорта), 100vh равно высоте окна браузера (вьюпорта).
100wmin равно наименьшему из (vw, vh), 100vmax равно наибольшему из (vw, vh)

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 
Обычный текст 
Привет! Это Фрилансер по жизни! 
Живи, а работай в свободное время! 
Подписывайся!
 
Ставь лайк!
 
 
И комментарий напиши!
 
 

Источник