Единицы измерения: px, em, rem и другие
В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.
Пиксели: px
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
Достоинства
- Главное достоинство пикселя – чёткость и понятность
Недостатки
- Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами
Давно на свалке: mm , cm , pt , pc
Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.
Вот, если интересно, их значения:
- 1mm (мм) = 3.8px
- 1cm (см) = 38px
- 1pt (типографский пункт) = 4/3 px
- 1pc (типографская пика) = 16px
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
Почему в сантиметре cm содержится ровно 38 пикселей?
В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.
Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.
Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
Относительно шрифта: em
1em – текущий размер шрифта.
Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.
Размеры в em – относительные, они определяются по текущему контексту.
Например, давайте сравним px с em на таком примере:
Страусы Живут также в Африке 24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.
А вот аналогичный пример с em вместо px :
Страусы Живут также в Африке Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.
Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
Что такое размер шрифта?
Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.
Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
Единицы ex и ch
В спецификации указаны также единицы 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 .
Вроде бы, использовать можно, однако есть проблема.
Протестируем на таком списке:
RENOTES
Единица rem — это смесь px и em. rem задаёт размер относительно размера шрифта элемента . 1 rem = 16px.
| 10px | 0.625rem |
| 11px | 0.6875rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 17px | 1.0625rem |
| 18px | 1.125rem |
| 19px | 1.1875rem |
| 20px | 1.25rem |
| 21px | 1.3125rem |
| 22px | 1.375rem |
| 23px | 1.4375rem |
| 24px | 1.5rem |
| 25px | 1.5625rem |
| 26px | 1.625rem |
| 27px | 1.6875rem |
| 28px | 1.75rem |
| 29px | 1.8125rem |
| 30px | 1.875rem |
| 31px | 1.9375rem |
| 32px | 2rem |
| 33px | 2.0625rem |
| 34px | 2.125rem |
| 35px | 2.1875rem |
| 36px | 2.25rem |
| 37px | 2.3125rem |
| 38px | 2.375rem |
| 39px | 2.4375rem |
| 40px | 2.5rem |
| 41px | 2.5625rem |
| 42px | 2.625rem |
| 43px | 2.6875rem |
| 44px | 2.75rem |
| 45px | 2.8125rem |
| 46px | 2.875rem |
| 47px | 2.9375rem |
| 48px | 3rem |
| 49px | 3.0625rem |
| 50px | 3.125rem |
| 51px | 3.1875rem |
| 52px | 3.25rem |
| 53px | 3.3125rem |
| 54px | 3.375rem |
| 55px | 3.4375rem |
| 56px | 3.5rem |
| 57px | 3.5625rem |
| 58px | 3.625rem |
| 59px | 3.6875rem |
| 60px | 3.75rem |
| 61px | 3.8125rem |
| 62px | 3.875rem |
| 63px | 3.9375rem |
| 64px | 4rem |
P.S. rem не поддерживается в IE8-.
rem , em
Относительные единицы измерения, которые считаются от размера шрифта.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как пишется
- Как понять
- Подсказки
- На практике
- Realetive советует
- Алёна Батицкая советует
- Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?
Обновлено 9 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Задаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента или — rem (от root ephemeral unit — «главная относительная единица»).
Пример
Скопировать ссылку «Пример» Скопировано
Пусть размер шрифта корневого элемента будет равен 16 пикселям:
html font-size: 16px;>html font-size: 16px; >Тогда размер шрифта элемента с классом block будет равен 16px × 1,5 = 24px:
.block font-size: 1.5rem;>.block font-size: 1.5rem; >Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em , то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.
.block__elem width: 5em;>.block__elem width: 5em; >А если самому элементу задать размер шрифта 2em , то к унаследованному размеру добавится ещё один множитель: 16px × 1,5 × 5 × 2 = 240px.
.block__elem width: 5em; font-size: 2em;>.block__elem width: 5em; font-size: 2em; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Как и все остальные единицы измерения в CSS — em и rem пишутся сразу после числового значения без пробела:
.selector width: 10em;> .selector margin: 5rem;>.selector width: 10em; > .selector margin: 5rem; >Как понять
Скопировать ссылку «Как понять» Скопировано
Единицы em и rem используют для вычисления размера шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width , height , padding , margin , border — width и так далее.
Итоговое значение размера, заданное через em и rem , вычисляется динамически и меняется, когда значение, от которого вычислялось em и rem , изменится.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Часто при работе с rem для селектора html пишется следующее CSS-правило:
html font-size: 62.5%;>html font-size: 62.5%; >Магическое число 62.5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.
Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.
На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
�� Если размер страницы был изменён глобально, то есть через настройки операционной системы или с помощью Ctrl + / Ctrl — , то значение шрифта у также пропорционально изменится, даже если оно было задано явно. Такое масштабирование будет происходить более пропорционально, если при вёрстке вы сможете найти закономерности размеров элементов относительно размера шрифта.
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, и меняются только фактические размеры, то можно сделать, например, так:
html /* 10px */ font-size: 62.5%;> .title-block /* 10rem * 10px = 100px */ width: 10rem; /* 2rem * 10px = 20px */ font-size: 2rem;> @media (max-width: 640px) html /* 8px */ font-size: 50%; >>html /* 10px */ font-size: 62.5%; > .title-block /* 10rem * 10px = 100px */ width: 10rem; /* 2rem * 10px = 20px */ font-size: 2rem; > @media (max-width: 640px) html /* 8px */ font-size: 50%; > >Без дополнительных правил ширина блока уменьшилась до 80px, а размер шрифта внутри до 16px.
Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение ��
На собеседовании
Скопировать ссылку «На собеседовании» Скопировано
Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?
Скопировать ссылку «Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?» Скопировано
Скопировать ссылку «Матвей Романов отвечает» Скопировано
Что такое em
Скопировать ссылку «Что такое em» Скопировано
Единицы em в CSS — это относительная единица измерения, которую используют для определения размера элементов, в основном для размера шрифта. Поскольку так задаются размеры относительно родительского элемента, 1em равен размеру шрифта, установленному в родительском элементе.
Это означает, что если установите размер шрифта в родительском как 20px и размер шрифта дочернего как 2em , размер шрифта в дочернем будет равен 40px .
Что такое rem
Скопировать ссылку «Что такое rem» Скопировано
rem — это ещё одна относительная единица для величины шрифта в CSS. Так как em равен размеру пункта текущего шрифта, то rem относится к размеру шрифта корневого элемента. Обычно это тег .
Польза для доступности
Скопировать ссылку «Польза для доступности» Скопировано
Единицы em и rem — масштабируемый и гибкий способ изменения размеров шрифта на странице, в отличие от px . Если измените размер шрифта корневого элемента, все элементы, размер которых измеряется с помощью em или rem , будут автоматически обновлены, чтобы сохранить их относительные значения.
Для того, чтобы шрифты на странице были доступными, рекомендуют использовать относительные единицы вместо абсолютных. Это особенно важно для пользователей, которые изменяют размер шрифта, разрядку букв и размеры других элементов для более удобного чтения и взаимодействия. Так изменение настроек шрифта в браузере пользователя не приведёт к проблемам со стилями, читаемостью или непредсказуемым результатам.
Конвертер пикселей в rem
Этот бесплатный конвертер можно использовать для преобразования пикселей (px) в единицы rem. пожалуйста, введите базовое значение и значение пикселей (px), которые вы хотите преобразовать в rem, и просто нажмите на кнопку конвертировать!
Как использовать конвертер пикселей в rem
Сначала введите базовое значение
Во-вторых, введите значение пикселов
Наконец, нажмите на кнопку конвертировать
Видеоурок: Как использовать конвертер пикселей в rem
Что такое единица измерения rem и как вы конвертируете пиксели в rem?
Rem — аббревиатура от Root em. Rem относится к базовому размеру корневого элемента и постоянен во всем документе.
Единица rem обычно используется в разработке CSS.
это уравнение можно использовать для преобразования пикселя в Rem: Rem = пиксель/базовый размер.
Например, если пиксель в вашей работе равен 24, а базовый размер равен 16, и вы хотите преобразовать px в rem вручную: Rem=24/16=1.5.
но мы рекомендуем использовать онлайн-конвертер px в rem, потому что он быстрый и более точный.
В чем разница между единицами Rem и Em?
Единица em находится непосредственно относительно размера текста, в то время как Rem — относительно размера корня.
Таблица преобразования пикселей в Rem, если базовый размер равен 16
Это диаграмма для результатов преобразования px в rem, которую разработчики обычно используют, если базовый размер равен 16.
пиксели Rem 1 пикселей 0.0625 rem 2 пикселей 0.125 rem 3 пикселей 0.1875 rem 4 пикселей 0.25 rem 5 пикселей 0.3125 rem 6 пикселей 0.375 rem 7 пикселей 0.4375 rem 8 пикселей 0.5 rem 9 пикселей 0.5625 rem 10 пикселей 0.625 rem 11 пикселей 0.6875 rem 12 пикселей 0.75 rem 13 пикселей 0.8125 rem 14 пикселей 0.875 rem 15 пикселей 0.9375 rem 16 пикселей 1 rem 17 пикселей 1.0625 rem 18 пикселей 1.125 rem 19 пикселей 1.1875 rem 20 пикселей 1.25 rem 21 пикселей 1.3125 rem 22 пикселей 1.375 rem 23 пикселей 1.4375 rem 24 пикселей 1.5 rem 25 пикселей 1.5625 rem