Единицы измерения px, em, rem — когда и как использовать


Сегодня разберемся с одними из основных единиц измерения в вебе: px, em, rem. Если с пикселями все более-менее понятно, то em и rem часто вызывают вопросы, особенно у тех, кто только начинает свой путь Frontend-разработчика. Разберем понятия, как расчитывать, когда и как применять. Поехали!

Что такое пиксель (px)

— это наименьшая точка (на самом деле, квадратик 😉) на экране устройства. Множество таких точек формируют все, что мы видим на экране: изображения, видео, тексты и т.д.

В мире фронтенд-разработки пиксель — базовая единица измерения. Все значения (в т.ч. заданные в em или rem), в конечном счете, браузер пересчитает в пиксели.

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

CSS-пиксели не всегда равны физическим пикселям экрана!

На устройствах с повышенной плотностью пикселей (например, мобильные устройства) браузеры автоматически применяют масштабирование (увеличивают веб-страницы) — иначе элементы были слишком мелкими и нечитабельными.

Когда использовать px

  • Мелкие детали (иконки, границы, тени, тонкие декоративные элементы и т.д.)

  • Для элементов с трансформацией (если вы видите, что элемент размыт, а размытие вы не применяли, попробуйте задать размеры в px (целые четные числа!)

  • Фиксированные макеты (админки и ЛК с большим кол-вом инструментов редактирования и управления; письма; игры; промо-сайты и лендинги, если не нужен адаптив; страницы под один конкретный экран, например, экран с заказами в ресторане).

  • Медиа-запросы (для определения брейкпоинтов — ширины или высоты экрана, при которых должны применяться определенные стили)

Что такое em

— относительная единица измерения, которая зависит от размера шрифта:

  • родителя (для свойства font-size)
  • текущего элемента (для других свойств, например, padding, width и т.д)

Как считать

Например, верстаем кнопку c размером шрифта 24px и внутренними отступами 12px (вертикальные) и 48px (горизонтальные):


// размер шрифта родителя
font-size: 16px;

// размеры для кнопки
font-size: 1.5em; // 24px (1em = 16px; 16 * 1.5 = 24)
padding: 0.5em 2em; // 12px 48px
// (1em = 24px; 0.5 * 24 = 12; 2 * 24 = 48)

Когда использовать em

  • Типографика — когда важно сохранить пропорции текста и его окружения при адаптиве. Для этого настраивается размер текста, отступов, длины строки, межстрочного интервала (*для line-height можно указывать просто значение, без em — это одно и тоже).

  • Модульная/компонентная разработка (в фреймворках, таких как React, или когда просто верстаете модульно, используйте em для сохранения пропорций компонентов в независимости от контекста. Так они гармонично впишутся куда угодно).

Внимание, наследование! — вложенность одинаковых селекторов друг в друга может вызывать неочевидные проблемы при наследовании, самый частый например — вложенные списки.

Что такое rem

— тоже относительная единица измерения, зависит от размера шрифта корневого
элемента html. Нужен для масштабирования макетов в соответствии с пользовательскими настройками размера шрифта.

Также просто необходим для адаптивной верстки по принципу масштабирования: когда меняем размер шрифта в html, масштабируется вся страница, что бывает
очень удобно.

Как и когда использовать rem

Когда важна доступность, а она всегда важна! :) Значение для font-size в html задается в процентах (%) — тогда макет будет масштабироваться в соответствии с настрой-ками пользователя. По дефолту это значение = 16px, но люди с плохим зрением могут его увеличить.

Если все же точное соответствие макету важнее доступности — задавайте значение font-size в html в пикселях (px).

Как перевести px в rem

Советуем для font-size в html задавать значение 62.5% (что = 10px).

Так будет легче переводить пиксели из макета в rem. Например: нужно сверстать блок с шириной 200px, padding-ами по 24px и размер шрифта — 16px. Переводим в rem (нужно просто разделить на 10 — и даже калькулятор не нужен :) 

    
width: 20rem;
padding: 2.4rem;
font-size: 1.6rem;

Выводы

  • Используйте rem вместо px, чтобы ваши проекты были читабельными и доступными для всех и легко масштабировались, упрощая адаптивную верстку

  • Используйте px для мелких деталей; в @media-запросах для определения ширины или высоты экрана; когда нужна точность

  • Используйте em в переиспользуемых компонентах, и когда нужно сохранить пропорции в рамках одного блока

Выбор единицы измерения — это всегда компромисс между точностью, масштабируемостью и доступностью. Не забывайте, что каждый проект уникален — отталкивайтесь от конкретных задач и макетов. Удачи в разработке, ребят!

ПроектыСтудияКонтактыОбсудить проект