Руководство по конвертации единиц CSS: px, rem, em, vw, vh подробно

Выбор правильных единиц CSS — одно из самых влиятельных решений при написании таблиц стилей. Выбранные вами единицы определяют, как элементы масштабируются на разных размерах экрана, как они реагируют на пользовательские предпочтения (например, настройки размера шрифта браузера) и насколько предсказуемо ведёт себя макет. Однако многие разработчики по привычке используют пиксели, упуская гибкость и преимущества доступности, которые предоставляют относительные единицы. Это руководство охватывает все основные единицы CSS, объясняет, когда использовать каждую, показывает, как конвертировать между ними, и предоставляет практические лучшие практики для современного адаптивного дизайна.

Понимание классификации единиц CSS

Единицы CSS делятся на две широкие категории: абсолютные и относительные единицы. Абсолютные единицы имеют фиксированный физический размер, в то время как относительные единицы получают своё вычисляемое значение из другой точки отсчёта. Понимание этого различия является основой для принятия обоснованных решений о единицах.

Абсолютные единицы

Абсолютные единицы — это меры фиксированного размера. Наиболее часто используемая абсолютная единица в веб-разработке — пиксель (px). Другие абсолютные единицы включают пункты (pt), сантиметры (cm), миллиметры (mm) и дюймы (in). Эти единицы в основном используются для таблиц стилей печати или когда вам нужна мера, не зависящая от контекста. В экранном CSS px — единственная абсолютная единица, которую вы будете регулярно использовать.

Относительные единицы

Относительные единицы вычисляют своё конечное значение на основе эталонного значения. em относится к размеру шрифта текущего элемента, rem относится к размеру шрифта корневого элемента, vw и vh относятся к размерам viewport, а проценты относятся к родительскому элементу. Относительные единицы являются краеугольным камнем адаптивного и доступного дизайна, поскольку они позволяют вашему макету автоматически адаптироваться к различным контекстам.

Пиксели (px): базовая единица

Пиксель — наиболее интуитивная единица CSS, поскольку она напрямую отображается на экранные пиксели (с некоторыми оговорками относительно соотношения пикселей устройства). Значения px всегда одинаковы независимо от контекста, что делает их предсказуемыми и лёгкими для понимания. Однако эта предсказуемость имеет свою цену: размеры на основе пикселей не масштабируются, когда пользователи изменяют размер шрифта браузера по умолчанию, что создаёт проблемы доступности.

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

• Ширина границы: граница в 1px должна оставаться 1px независимо от настроек размера шрифта.
• Тени блока: смещение тени и радиус размытия обычно лучше всего задавать в пикселях для согласованного визуального эффекта.
• Мелкие детали: любые значения, масштабирование которых испортило бы визуальный дизайн, например, тонкие разделительные линии или точное позиционирование иконок.
• Размер шрифта корня: установка html { font-size: 16px; } как базового уровня — распространённый шаблон, хотя следует уважать настройки браузера пользователя по умолчанию.

Когда избегать px

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

rem: размер относительно корня

). В большинстве браузеров размер шрифта корня по умолчанию составляет 16px, поэтому 1rem = 16px, 0.5rem = 8px, 2rem = 32px. Ключевое преимущество rem в том, что он масштабируется при изменении пользователем размера шрифта браузера по умолчанию, что делает его лучшим выбором для доступности.

Конвертация px в rem

Формула конвертации проста: разделите значение в пикселях на размер шрифта корня.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

Трюк с 62.5%

Многие разработчики находят математику деления на 16 утомительной. Популярный трюк — установить размер шрифта корня на 62.5%, что делает 1rem равным 10px. Это упрощает вычисления в уме: 14px становится 1.4rem, 24px становится 2.4rem и так далее.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em: размер относительно контекста

Единица em относится к размеру шрифта текущего элемента (или, для свойств, отличных от font-size, к его родительскому элементу). Это означает, что 1em равен текущему размеру шрифта, и значения em компаундируются при вложении элементов. Это поведение компаундирования может быть как мощным, так и запутанным.

Проблема компаундирования

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

Каждый вложенный элемент умножает размер шрифта, что приводит к экспоненциальному росту. Вот почему rem обычно лучше подходит для размеров шрифта. Однако em превосходен в конкретных случаях использования, где вы хотите масштабирование на уровне компонента.

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

• Отступы и поля компонентов: когда вы хотите, чтобы отступы масштабировались с размером шрифта компонента, em сохраняет всё пропорциональным. Если вы увеличите размер шрифта кнопки, её отступы автоматически масштабируются.
• Контрольные точки медиа-запросов: некоторые разработчики предпочитают контрольные точки на основе em, поскольку они масштабируются с предпочтениями размера шрифта пользователя, обеспечивая адаптацию макета при соответствующей ширине контента.
• Размер иконок внутри компонентов: иконки с размером в em масштабируются пропорционально окружающему тексту.

Единицы viewport: vw, vh, vmin, vmax

Единицы viewport относятся к размерам окна браузера. 1vw равен 1% ширины viewport, 1vh равен 1% высоты viewport. vmin — меньшее из vw и vh, vmax — большее. Эти единицы необходимы для создания макетов, реагирующих на доступное пространство экрана.

Распространённые случаи использования единиц viewport

Проблема vh на мобильных устройствах

В мобильных браузерах 100vh не всегда равен видимой высоте viewport. Адресная строка браузера и элементы управления навигацией занимают пространство, но 100vh включает область за этими элементами. Это приводит к обрезанию контента в нижней части полноэкранных секций. Современный CSS предоставляет dvh (динамическая высота viewport) как решение, учитывающее динамические панели инструментов. В качестве альтернативы используйте JavaScript для установки CSS-пользовательского свойства на основе window.innerHeight.

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

Новые единицы viewport: svh, lvh, dvh

CSS ввёл три новые единицы высоты viewport для решения проблем мобильного viewport:

• svh (Small Viewport Height): высота viewport, когда все UI браузера видны (адресная строка развёрнута).
• lvh (Large Viewport Height): высота viewport, когда UI браузера минимизирован (адресная строка свёрнута).
• dvh (Dynamic Viewport Height): текущая высота viewport, изменяющаяся при развёртывании или свёртывании UI браузера.

Те же варианты small/large/dynamic существуют для ширины (svw, lvw, dvw) и единиц min/max (svmin, lvmin, dvmin и т.д.). Используйте dvh для полноэкранных макетов на мобильных устройствах, svh, когда нужно гарантировать, что контент виден без прокрутки, и lvh, когда хотите заполнить максимально возможное пространство.

Использование clamp() для плавной типографики

Функция CSS clamp() меняет правила игры для адаптивной типографики. Она принимает три значения: минимальное, предпочтительное и максимальное. Браузер выбирает предпочтительное значение, но ограничивает его между минимальным и максимальным.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

Этот подход даёт вам преимущества масштабирования на основе viewport без риска, что текст станет слишком маленьким на мобильных устройствах или слишком большим на десктопе. Он устраняет необходимость в контрольных точках медиа-запросов для размера шрифта, значительно снижая сложность CSS.

Справочная таблица конвертации

Используйте эту таблицу как быстрый справочник для распространённых конвертаций. Все значения предполагают размер шрифта корня 16px и viewport 1920x1080.

Лучшие практики единиц CSS

• Используйте rem для размеров шрифта: это самое важное правило. Размеры шрифта на основе rem уважают пользовательские предпочтения и согласованно масштабируются во всём приложении.
• Используйте em для отступов компонентов: отступы и поля внутри компонентов выигрывают от em, поскольку они масштабируются пропорционально при изменении размера шрифта компонента.
• Используйте px для границ и мелких деталей: значения, которые не должны масштабироваться с размером шрифта (например, границы 1px и смещения теней), должны использовать пиксели.
• Используйте проценты для ширины макета: гибкие макеты используют столбцы и ширину контейнера на основе процентов, позволяя контенту перестраиваться на разных размерах экрана.
• Используйте единицы viewport для полноэкранных элементов: hero-секции, наложения и любые элементы, которые должны заполнять viewport, выигрывают от vh и vw.
• Используйте clamp() для плавной типографики: замените контрольные точки медиа-запросов для размера шрифта на clamp(), чтобы создать плавное масштабирование между минимальным и максимальным размерами.
• Никогда не устанавливайте корневой font-size в px: всегда используйте проценты (например, 62.5%) или сохраняйте значение браузера по умолчанию. Установка в пикселях переопределяет предпочтения доступности пользователя.
• Будьте последовательны: выберите стратегию единиц для вашего проекта и придерживайтесь её. Случайное смешивание единиц делает кодовую базу сложнее в поддержке и отладке.