Как перевести CSS-единицы: px, rem, em, проценты и viewport

Что можно пересчитать

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

Поддерживаются px, em, rem, %, vw, vh, pt, cm, mm и in в качестве исходной или целевой единицы. Важно заранее определить, что именно означает число в вашем CSS-контексте: em и rem зависят от базового размера, процент в этом инструменте также рассчитывается через базовый размер, а vw и vh зависят соответственно от ширины и высоты viewport. Поэтому один и тот же исходный размер может дать разные результаты при разных настройках.

Пошаговый пересчёт

1. Введите числовое значение, которое хотите пересчитать. Если оставить поле значения без числа, используется значение 16.
2. Выберите исходную единицу. Если она не указана, инструмент использует px. Затем выберите целевую единицу; при пустом поле назначения используется rem.
3. Для em, rem и процентов задайте базовый размер. По умолчанию он равен 16. Для vw укажите ширину viewport, а для vh укажите его высоту. Значения по умолчанию составляют 1920 для ширины и 1080 для высоты.
4. Запустите пересчёт и проверьте, что единицы указаны в ожидаемом направлении: например, px является исходной единицей, а rem целевой. Вводите числовые параметры без попытки включить в них название единицы, если форма разделяет эти поля.
5. Сопоставьте результат с задачей. Для перевода из px в em или rem число пикселей делится на базовый размер. Для перевода в проценты значение умножается на 100 и делится на базовый размер. Для vw и vh используются ширина и высота viewport соответственно.
6. При необходимости пересчитайте значение ещё раз с другим базовым размером или размером viewport, а затем сохраните подходящий результат в своём рабочем документе. Успешный ответ содержит преобразованное значение и промежуточное значение в пикселях; оба округляются до четырёх знаков после запятой.

Для абсолютных единиц применяются такие коэффициенты: 1 pt соответствует 1,33333 пикселя, 1 cm составляет 37,795 пикселя, 1 mm составляет 3,7795 пикселя, а 1 in составляет 96 пикселей. При обратном пересчёте используются обратные коэффициенты. Если размер основания равен нулю, преобразование в em, rem или проценты возвращает ноль. Если равна нулю соответствующая ширина или высота viewport, преобразование в vw или vh также возвращает ноль.

Как понимать ответ

Результат нужно читать вместе с параметрами, которые были выбраны перед запуском. Значение 16 px при базовом размере 16 даёт 1,0000 rem, потому что пиксельное значение делится на 16. Если изменить базовый размер на 20, тот же размер станет 0,8000 rem. Это не ошибка: изменился знаменатель пересчёта. Аналогично, результат в vw зависит от ширины viewport, а результат в vh от его высоты.

Инструмент сначала приводит исходное значение к пикселям, а затем переводит пиксельное значение в выбранную целевую единицу. Поэтому для em, rem и процентов промежуточный пиксельный результат помогает понять ход вычисления. Для pt, cm, mm и in итог зависит от указанных коэффициентов, а не от базового размера. Четыре знака после запятой относятся и к промежуточному, и к итоговому значению, поэтому небольшое отличие от ручного расчёта может быть следствием округления.

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

Практический пример

Вам нужно проверить, во что превратится размер 16 px при базовом размере шрифта 16.

Введите 16, выберите px как исходную единицу и rem как целевую, оставьте базовый размер 16 и запустите пересчёт.

Успешный ответ содержит промежуточное пиксельное значение 16,0000 и итоговое значение 1,0000 rem.

Ограничения

• Результат не следует считать проверкой корректности CSS-контекста: неизвестная исходная единица проходит как пиксели, а неизвестная целевая единица оставляет пиксельное значение без изменения.

Частые ошибки

• Ошибка: ожидать перевод в rem относительно другого размера шрифта, но оставить базовый размер 16 по умолчанию. Исправление: перед запуском укажите фактический базовый размер, который должен использоваться в расчёте.

Частые вопросы

Как перевести px в rem с базовым размером шрифта?

Если оставить базовый размер пустым, используется значение 16. Укажите другое число, если расчёт должен соответствовать вашему размеру шрифта.

Почему результат в vw или vh меняется при другом размере экрана?

Для vw задайте ширину viewport, а для vh задайте его высоту. Если соответствующий размер не указан, используются 1920 для ширины и 1080 для высоты.

Что произойдёт при неизвестной единице?

Если целевая единица не распознана, пиксельное значение остаётся без изменения. Проверьте написание единицы и не принимайте такой ответ за подтверждённый CSS-пересчёт.