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

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

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

Преобразование между пикселями и пунктами использует соотношение CSS, по которому один пункт равен одному и одной трети пикселя, то есть один пиксель — это 0,75 пункта. Одновременный показ всех эквивалентов облегчает проверку того, согласуется ли токен отступа или размера шрифта с остальной шкалой. Кнопка копирования создаёт компактную многострочную сводку для заметок, pull request или ревью токенов.

Приватная работа в браузере

Вся обработка выполняется в вашем браузере с помощью клиентского JavaScript. Инструмент не загружает на сервер фрагменты кода, значения конфигураций, сгенерированные данные, тексты запросов или скопированные примеры и не требует учётной записи. Такая сугубо локальная модель важна для инструментов разработчика, ведь вставляемое содержимое часто похоже на реальные данные приложения: ответы API, логи, образцы, похожие на переменные окружения, запросы к базам данных, разметку из черновиков или значения, скопированные во время отладки в рабочей среде. Локальная обработка снижает риск и делает работу быстрой, так как нет обращений к сети.

Интерфейс намеренно компактен: вы вставляете входные данные, меняете параметры, просматриваете результат, копируете его и возвращаетесь в редактор. Результаты всё же стоит проверять, прежде чем коммитить их, публиковать или использовать в рабочем процессе. Браузерные инструменты отлично подходят для быстрого осмотра и подготовки, но не знают всех соглашений проекта, правил классификации данных и требований валидации, специфичных для приложения.

Практические советы

Используйте rem для значений, которые должны следовать за корнем документа, например доступные размеры шрифта и отступы макета, связанные с настройками пользователя. Используйте em, когда значение должно масштабироваться вместе с размером шрифта самого компонента, скажем, для выравнивания иконок, локальных внутренних отступов или вложенной типографики. Осторожно применяйте px для точных границ, растровых ресурсов и случаев, когда относительное масштабирование нежелательно. Фактические вычисленные размеры могут зависеть от настроек браузера, наследования, масштаба, медиазапросов и стилей конкретного контейнера, поэтому важные значения проверяйте в инструментах разработчика.