Конвертер единиц CSS
Переводите CSS-длину между px, rem, em, vw, vh, pt и процентами. Введите значение, выберите его единицу, укажите размер шрифта корневого и родительского элемента, а также размеры окна — и сразу получите все эквиваленты.
Перевод между px, rem, em, vw и vh
Формула единиц CSS
Где:
- \(v\) — введённая вами длина в её исходной единице
- \(f(\text{единица})\) — сколько пикселей содержится в одной единице данного типа:
- \(px\): 1 \(rem\): размер шрифта корневого элемента \(em\): размер шрифта родителя \(vw\): ширина окна \(/ 100\) \(vh\): высота окна \(/ 100\) \(pt\): \(96/72 = 1.3333\) \(%\): размер шрифта родителя \(/ 100\)
Сначала калькулятор переводит введённое значение в пиксели, а затем делит его на пиксельный коэффициент каждой целевой единицы. Такой двухэтапный подход гарантирует, что все семь результатов согласуются между собой.
Единицы CSS — пример расчёта
Пример: переведём 24px в rem, em, vw, vh и pt при размере шрифта корневого и родительского элемента 16px и окне размером 1920×1080 (значения по умолчанию в калькуляторе).
\[ px = 24 \times 1 = 24 \]
\[ rem = \frac{24}{16} = 1.5 \quad em = \frac{24}{16} = 1.5 \]
\[ vw = \frac{24}{1920/100} = \frac{24}{19.2} = 1.25 \quad vh = \frac{24}{1080/100} \approx 2.2222 \]
\[ pt = 24 \times \frac{72}{96} = 18 \]
Результат: 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.
Как пользоваться конвертером единиц CSS
- Введите длину в поле Значение — например, 24. Подходят и отрицательные значения: это удобно для отрицательных отступов.
- Выберите единицу этого значения в выпадающем списке Единица CSS (px, rem, em, vw, vh, pt или %).
- Укажите Размер шрифта корневого элемента — размер шрифта элемента
<html>. По умолчанию в браузерах он равен 16px. - Укажите Размер шрифта родителя — вычисленный размер шрифта родительского элемента; он нужен для перевода em и %.
- Введите Ширину и высоту окна просмотра браузера в пикселях — от них зависят результаты для vw и vh.
- Все эквиваленты сразу появятся в блоке Преобразованные значения вместе с основой перевода, показывающей, сколько пикселей равна каждая единица в ваших настройках.
Что такое единицы CSS и почему они важны
Длины в CSS делятся на два семейства. Абсолютные единицы, такие как px и pt, имеют фиксированный размер: спецификация CSS определяет опорный пиксель так, что 1in = 96px = 72pt. Относительные единицы зависят от контекста: rem отсчитывается от размера шрифта корневого элемента, em — от размера шрифта родителя, vw и vh — от 1 % ширины или высоты окна просмотра, а % (для font-size) — от размера шрифта родителя.
Выбор единицы определяет поведение макета. Значения в px не меняются независимо от настроек пользователя: это делает их предсказуемыми для рамок и мелких деталей, но негибкими для типографики. Значения в rem масштабируются вместе с размером шрифта корневого элемента, поэтому если пользователь увеличит базовый размер текста в браузере, всё, что задано в rem, вырастет пропорционально — это ключевое требование доступности. Значения в em перемножаются во вложенных элементах, из-за чего в глубокой разметке результат может оказаться неожиданным.
Единицы окна просмотра заставляют типографику и отступы реагировать на размер окна. Ширина, заданная как 50vw, всегда занимает половину экрана, поэтому в_first-секциях и «резиновой» типографике vw часто комбинируют с rem через clamp(). Поскольку vw и vh меняются при каждом изменении размера окна, переводить их в px имеет смысл только для одного конкретного размера окна — того, который вы вводите в калькулятор.
Читать результат просто: каждое значение — это одна и та же физическая длина, выраженная в другой единице. Если вы переводите дизайн-систему с px на rem, столбец rem подскажет значение токена для записи; если вы работаете с печатью или сравниваете значения с дизайн-инструментами, где используются пункты, прямую величину даст столбец pt.
Допущения, ограничения и практические советы
- Конвертер исходит из стандартного опорного пикселя CSS:
1in = 96px = 72pt. При физическом (печатном) выводе значения могут немного отличаться в зависимости от устройства. - Проценты трактуются как относительные к размеру шрифта родителя — это верно для
font-size. Дляwidth,height,marginиpaddingпроценты отсчитываются от размеров родителя, поэтому в таких случаях нужно другое опорное значение. - em отсчитывается от размера шрифта родителя. Но когда em используется в свойстве наподобие
line-heightилиpaddingсамого элемента, он привязан к размеру шрифта этого элемента — соответствующим образом скорректируйте поле «Размер шрифта родителя». - Результаты для vw и vh верны только для тех размеров окна, которые вы ввели. Проверьте несколько вариантов (например, 1920×1080, 1366×768, 390×844), чтобы увидеть, как меняются переведённые значения.
- В некоторых настройках браузеры применяют минимальный размер шрифта, из-за чего очень мелкий текст на основе rem или em может отображаться крупнее, чем предсказывает расчёт.
- Полезное правило: при корневом размере шрифта 16px по умолчанию 1rem = 16px, то есть px ÷ 16 = rem. Если задать корень 10px, значения rem будут равны px ÷ 10 один к одному — поэтому многие дизайн-системы используют корень 10px.
Если вам нужно переводить и другие единицы — измерительные или технические, — попробуйте наши конвертер единиц мощности, конвертер скорости передачи данных или универсальный конвертер единиц скорости.
Часто задаваемые вопросы
Как перевести px в rem вручную, без калькулятора?
Разделите значение в пикселях на размер шрифта корневого элемента. При браузерном значении по умолчанию 16px формула выглядит так: \( rem = px \div 16 \). Например, 24px = 1.5rem, 32px = 2rem, 12px = 0.75rem. В обратную сторону нужно умножить: \( px = rem \times 16 \). Если в проекте задан другой корневой размер — скажем, 10px в популярном приёме с 62,5 % — просто подставьте это значение вместо 16.
В чём разница между em и rem и когда что использовать?
rem всегда отсчитывается от размера шрифта корневого элемента, поэтому 1.5rem означает одно и то же в любом месте документа. em привязан к размеру шрифта родительского элемента (или самого элемента — для свойств вроде padding и line-height), поэтому во вложенной разметке значения перемножаются. Распространённая рекомендация: используйте rem для размеров шрифта и отступов, чтобы значения оставались предсказуемыми и учитывали настройки пользователя; em применяйте там, где элемент должен масштабироваться вместе с локальным текстом — например, для внутренних отступов кнопки.
Сколько пикселей в 1pt и как pt и px связаны с дюймами?
CSS определяет опорный пиксель так, что \( 1\text{in} = 96\text{px} = 72\text{pt} \). Отсюда 1pt равен \( 96/72 \approx 1.3333 \) px, а 1px — 0,75 pt. Именно поэтому текстовые редакторы и инструменты печатного дизайна, работающие с пунктами, показывают другие числа, чем CSS: шрифт размером 12pt на экране превращается в 16px. Конвертер использует именно это соотношение для результатов в pt.
Почему мои значения em не совпадают с тем, что показывает браузер?
Причин обычно две. Во-первых, em перемножается: если у родителя font-size 1.25em от корня 16px (то есть 20px), а дочернему элементу задано 1.5em, получится 30px, а не 24px. Во-вторых, для свойств вроде padding, margin и line-height самого элемента em отсчитывается от собственного размера шрифта этого элемента, а не родительского. В таких случаях введите вычисленный размер шрифта самого элемента в поле «Размер шрифта родителя» в конвертере.
Значения vw и vh одинаковы на всех экранах?
Нет. 1vw — это 1 % текущей ширины окна просмотра, поэтому одно и то же значение vw равно разному количеству пикселей при разных размерах окна. Например, 10vw — это 192px на экране шириной 1920px, но всего 39px на телефоне с шириной 390px. Переводите vw/vh в px только для конкретного размера окна — введите в калькулятор точные размеры, под которые верстаете, и повторите расчёт для других контрольных точек.
Как узнать, какой корневой размер шрифта фактически используется на сайте?
Откройте DevTools браузера, проинспектируйте элемент <html> и посмотрите его вычисленный font-size на вкладке Styles или Computed. Если CSS-правила его не переопределяют, действует браузерное значение по умолчанию — 16px. Учтите, что некоторые сайты используют приём с 62,5 %, задавая корню 10px, чтобы 1rem = 10px. Также проверьте, не меняют ли эффективное значение какое-нибудь расширение браузера или настройка минимального размера шрифта.
Что лучше для доступности — px или rem?
Для размеров шрифта обычно предпочтительнее rem: он масштабируется, когда пользователь увеличивает базовый размер текста в браузере, тогда как текст в px остаётся неизменным и игнорирует эту настройку. Это важно для слабовидящих пользователей и требуется руководствами по доступности, такими как WCAG. Для рамок, теней и тонких линий, где масштабирование не нужно, px по-прежнему уместен. Практичный подход: rem для типографики и отступов, px для критичных к пикселям декоративных деталей и clamp() с rem и vw для «резиновой» типографики.