Конвертер CSS-единиц

Онлайн-конвертер CSS-единиц измерения для веб-разработчиков, дизайнеров и верстальщиков. Инструмент мгновенно переводит значения между всеми основными единицами, используемыми в каскадных таблицах стилей: пиксели (px), em, rem, проценты (%), единицы окна просмотра (vw, vh), а также типографские и метрические единицы — пункты (pt), сантиметры (cm), миллиметры (mm) и дюймы (in). Конвертер учитывает контекст: базовый размер шрифта корневого элемента html для расчёта rem, размер шрифта родительского элемента для вычисления em и процентов, а также фактические размеры viewport для единиц vw и vh.

При адаптивной вёрстке сайтов критически важно правильно подбирать единицы измерения. Использование относительных единиц em и rem вместо абсолютных px делает интерфейс гибким и масштабируемым. Калькулятор CSS-единиц помогает быстро перевести пиксели в em, rem в проценты, vw в пиксели и обратно, экономя время на ручных расчётах. Вы задаёте значение в одной единице — и сразу получаете эквиваленты во всех остальных, с возможностью мгновенного копирования любого результата в буфер обмена.

Инструмент особенно полезен при переходе от фиксированного макета к адаптивному, когда нужно массово конвертировать px в em или rem. Встроенная справочная таблица, визуальное превью размера текста и готовый CSS-сниппет ускоряют работу. Пресеты популярных устройств (десктоп 1920×1080, ноутбук 1366×768, планшет 768×1024, телефон 375×812) позволяют моментально переключить контекст viewport для корректного расчёта vw и vh.

Все вычисления выполняются локально в браузере — введённые значения не отправляются на сервер сайта. Конвертер работает без регистрации и без ограничений, одинаково удобно на компьютере и мобильном телефоне. Это незаменимый инструмент для любого, кто работает с CSS: от начинающих верстальщиков до опытных фронтенд-разработчиков.

Инструмент создан для широкого круга специалистов. Фронтенд-разработчики используют его при вёрстке макетов из Figma, Sketch или Adobe XD, где размеры указаны в пикселях, а в CSS нужны rem или em для адаптивности. Веб-дизайнеры быстро проверяют, как типографская шкала выглядит в разных единицах. Начинающие верстальщики учатся понимать соотношение между абсолютными и относительными единицами. Контент-менеджеры подбирают оптимальные размеры текста для разных устройств. Технические писатели переводят размеры из пунктов (pt) в пиксели для экранной типографики.

Абсолютная единица измерения. 1px соответствует одной физической точке на экране стандартной плотности (96 DPI). На экранах Retina один CSS-пиксель может занимать 2-3 физических пикселя. Пиксели не масштабируются при изменении пользователем размера шрифта в настройках браузера.

Зависит от размера шрифта родительского элемента. Если у родителя font-size: 16px, то 1em = 16px, 1.5em = 24px. Удобна для задания отступов и размеров относительно текста компонента. Каскадируется: если вложенные элементы используют em, размер множится на каждом уровне.

Зависит от размера шрифта корневого элемента html (по умолчанию 16px). В отличие от em, rem не каскадируется — всегда вычисляется от одного и того же базового значения. Это делает rem предсказуемым и рекомендуемым выбором для размеров текста, отступов и медиазапросов в адаптивной вёрстке.

Рассчитываются относительно родительского элемента. Для font-size процент берётся от font-size родителя. Для width — от ширины родительского блока. Проценты широко применяются в адаптивных сетках и при задании размеров контейнеров, гибко подстраивающихся под экран.

1vw равен 1% ширины области просмотра браузера. На экране шириной 1920px, 1vw = 19.2px. Применяется для создания элементов, масштабируемых пропорционально ширине экрана — баннеров, заголовков, полноэкранных секций. Полезна в CSS-функции clamp() для жидкой типографики.

1vh равен 1% высоты области просмотра браузера. Часто используется для задания высоты полноэкранных секций (height: 100vh). На мобильных устройствах может вести себя непредсказуемо из-за динамической адресной строки — для таких случаев в современном CSS есть svh и dvh.

Инструмент работает полностью на стороне клиента, поэтому результат появляется сразу, а введённые данные не отправляются на сервер сайта. Поддерживается всеми современными браузерами: Chrome, Firefox, Safari, Edge. Работает на любых устройствах — компьютерах, планшетах и мобильных телефонах.

Если у вас есть предложения по улучшению конвертера или вы хотите видеть дополнительные единицы (svw, svh, dvw, dvh, cqw, cqh), напишите в комментариях внизу страницы или нам напрямую: почта и Telegram есть на странице «Контакты».