Что такое Конвертер единиц CSS?
CSS поддерживает несколько разных единиц измерения — абсолютные, такие как px и pt, и относительные, такие как rem, em, vw, vh и %. Относительные единицы необходимы для адаптивного, доступного дизайна (rem, в частности, учитывает пользовательские настройки размера шрифта в браузере), но мысленно конвертировать между ними по-настоящему сложно, поскольку результат зависит от контекста: корневого размера шрифта, размера шрифта текущего элемента или размеров области просмотра.
Этот конвертер выполняет эти вычисления за вас: задайте базовый размер шрифта, размеры области просмотра и значение, которое вы конвертируете, и мгновенно увидите эквивалентное значение в каждой другой единице — это полезно для перевода пиксельных измерений макета дизайна в адаптивные значения rem/vw или для проверки того, как реально отображается существующее CSS-правило на экране.
Когда использовать этот калькулятор
- Когда нужно оценить стоимость до начала проекта
- Когда хотите сравнить результаты с похожими инструментами
- Когда хотите узнать, как использовать инструмент в разных ситуациях
- Когда нужно поделиться результатами с командой или клиентами
- Когда хотите проверить точность расчётов инструмента
- Когда ищете быстрое и простое решение конкретной задачи
Шаги:
- Введите значение, которое хотите конвертировать, и выберите его исходную единицу.
- Задайте базовый размер шрифта (по умолчанию — стандартные для браузера 16px).
- Для конвертации vw/vh введите целевую ширину и высоту области просмотра.
- Мгновенно получите эквивалентное значение в каждой другой единице.
Формула
1rem = 1em = базовый размер шрифта (по умолчанию 16px)
1pt = 96/72 px ≈ 1,333px
1vw = ширина области просмотра / 100
1vh = высота области просмотра / 100
1% = опорное значение / 100
Варианты использования
- Конвертация пиксельной спецификации дизайнера из Figma/Sketch в значения rem для доступного CSS
- Проверка того, как реально отображается адаптивный размер шрифта на основе vw при определённой ширине экрана
- Перевод устаревшего печатного или email-CSS на основе pt в веб-стандартные px или rem
- Проверка того, согласована ли шкала отступов дизайн-системы между единицами
- Быстрая проверка значения CSS во время код-ревью без открытия инструментов разработчика
Основные преимущества
- Конвертирует между всеми 7 распространёнными единицами CSS в одном месте
- Использует ваш реальный базовый размер шрифта и область просмотра, а не фиксированное предположение
- Мгновенные результаты по мере ввода — не нужно открывать инструменты разработчика браузера
- Бесплатно, без регистрации, работает полностью в вашем браузере
Советы профессионалов
- Предпочитайте rem вместо em для размеров шрифта, чтобы избежать неожиданного накопления во вложенных компонентах
- Используйте dvh/svh вместо vh для полноэкранных мобильных макетов, если ваши целевые браузеры это поддерживают
- Поддерживайте согласованный базовый размер шрифта во всей дизайн-системе, чтобы конвертации rem оставались предсказуемыми
- При переводе пиксель-идеального дизайна конвертируйте отступы в rem, но оставляйте ширину рамок и другие мелкие детали в px
Распространенные ошибки
- Предположение, что 1rem всегда равен 16px, без проверки изменения корневого размера шрифта
- Использование vh для полноэкранных мобильных макетов без учёта поведения адресной строки браузера
- Вложенность размеров шрифта на основе em и удивление, когда они неожиданно накапливаются
- Непоследовательное смешивание px и rem в одном компоненте, что нарушает масштабирование доступности
Объяснение ключевых терминов
- Корневой размер шрифта: font-size, заданный на элементе html, относительно которого рассчитываются все единицы rem
- Область просмотра: Видимая область веб-страницы в окне браузера
- Абсолютная единица: Единица вроде px или pt с фиксированным реальным размером, не зависящим от контекста
- Относительная единица: Единица вроде rem, em, vw или %, размер которой зависит от другого значения
Связанные понятия
- Конвертер цветов: Конвертируйте между форматами цветов HEX, RGB и HSL
- Конвертер длин: Конвертируйте между дюймами, сантиметрами, пикселями и другим
- Конвертер единиц: Конвертируйте между различными единицами измерения
- Калькулятор соотношения сторон: Вычисляйте и конвертируйте соотношения сторон
- Конвертер данных: Конвертируйте между байтами, КБ, МБ, ГБ и ТБ
Пример
При базовом размере шрифта 16px 1.5rem конвертируется в 24px. При ширине области просмотра 1440px 5vw конвертируется в 72px.
Интерпретация результатов
Этот инструмент показывает подробные результаты на основе введенных вами данных. Внимательно изучите каждый раздел, чтобы понять, как интерпретировать числа и принимать решения на их основе.
Если у вас есть вопросы о том, как работает инструмент или как интерпретировать конкретные результаты, ознакомьтесь с разделом часто задаваемых вопросов ниже или свяжитесь со службой поддержки.