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

Что такое Конвертер единиц CSS?

Конвертер единиц CSS — это бесплатный браузерный инструмент, который переводит одну длину CSS в семь распространённых единиц: px, rem, em, pt, %, vw и vh. Фронтенд-разработчики и веб-дизайнеры используют его, чтобы переводить макет между абсолютными пикселями и адаптивными единицами, проверять, скольким пикселям соответствует rem при пользовательском корневом размере шрифта, или превращать печатное значение pt в экранные пиксели. Поскольку rem зависит от корневого размера шрифта, em и % зависят от размера шрифта родителя, а vw/vh зависят от области просмотра, конвертер представляет все четыре параметра как настраиваемые параметры. Введите значение, выберите исходную единицу — и все поля результатов обновятся одновременно. Готовый к вставке фрагмент CSS перечисляет все семь эквивалентов в виде объявлений font-size.

Как пользоваться Конвертер единиц CSS

1. Откройте Настройки и задайте корневой размер шрифта (font-size элемента html, на котором основан rem), размер шрифта родителя (для em и %), а также ширину и высоту области просмотра (для vw и vh).
2. Введите число, которое хотите преобразовать, в поле значения.
3. Выберите исходную единицу из выпадающего списка «Из»: px, rem, em, pt, %, vw или vh.
4. Смотрите каждый эквивалент в подписанных полях результатов только для чтения; они все пересчитываются автоматически при изменении значения, единицы или любой настройки.
5. Скопируйте сгенерированный фрагмент CSS, чтобы вставить все семь эквивалентов font-size прямо в свою таблицу стилей.

Примеры

Корень 16px, значение 16, Из px

rem = 1

Корень 10px, значение 2, Из rem

px = 20

значение 16, Из px

pt = 12

Часто задаваемые вопросы

Между какими единицами он преобразует?

Семь единиц длины CSS: px, rem, em, pt, %, vw и vh. Любая из них может быть исходной, и все семь эквивалентов отображаются одновременно.

Зачем нужно задавать корневой размер, размер родителя и размеры области просмотра?

Эти единицы относительные. rem — кратное корневого размера шрифта (html), em и % относятся к размеру шрифта родителя, а vw/vh — это проценты от ширины и высоты области просмотра. Задав их в Настройках, вы сообщаете конвертеру, чему соответствует каждая относительная единица.

Как обрабатывается pt?

CSS определяет 96px = 1in = 72pt, поэтому 1pt равен 4/3 px, а 1px равен 0,75pt. Конвертер использует это фиксированное соотношение, независимо от размера шрифта или области просмотра.

Что произойдёт, если значение или настройка недопустимы?

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

Отправляется ли что-нибудь на сервер?

Нет. Все преобразования выполняются полностью на стороне клиента в вашем браузере, без загрузки и без обращений к серверу, поэтому введённые вами значения никогда не покидают ваше устройство.