Конвертер единиц CSS
Конвертируйте единицы длины CSS — px, rem, em, pt и % — вживую в вашем браузере. Задайте корневой размер шрифта, и каждая единица обновится мгновенно.
Каждое преобразование вычисляется локально в вашем браузере; введённые значения никогда не загружаются.
Работаете с цветами CSS? Попробуйте конвертер цветов CSS.
Об инструменте Конвертер единиц CSS
Этот конвертер единиц CSS превращает длину, введённую в одной единице, сразу во все остальные единицы CSS — px, rem, em, pt и %. Введите значение в любое поле, и остальные обновятся вживую, поэтому вы видите результат px в rem или pt в px без ручных вычислений. Поле корневого размера шрифта (по умолчанию 16px) определяет соотношения rem, em и %, что повторяет то, как браузеры разрешают относительные единицы относительно размера шрифта страницы. Встроенная краткая справка показывает распространённые значения px-в-rem, которые переиспользуют дизайнеры — 12, 14, 16, 24, 32 и другие — при выбранной базе. У каждого результата есть кнопка копирования, чтобы вставить его прямо в таблицу стилей. Всё работает в вашем браузере, поэтому введённые значения остаются на вашем устройстве.
Возможности
- Конвертирует между px, rem, em, pt и % в тот момент, когда вы вводите в любое поле
- Настраиваемый корневой размер шрифта определяет rem, em и %, чтобы результаты совпадали с вашим CSS
- Точное преобразование pt по множителю CSS 96/72 (1pt = 1.3333px)
- Трактует % как долю корневого размера шрифта, как и относительные к шрифту единицы CSS
- Таблица краткой справки с распространёнными значениями px-в-rem (12, 14, 16, 24, 32) при вашей базе
- Обрезает результаты до разумной точности и убирает замыкающие нули для аккуратных значений
- Копирование в один клик у каждой единицы, с включённым суффиксом единицы
- Запоминает ваше последнее значение и базовый размер шрифта между визитами
Как использовать Конвертер единиц CSS
- Задайте корневой размер шрифта, если он отличается от браузерного значения по умолчанию 16px.
- Введите значение в любое поле единицы — px, rem, em, pt или %.
- Прочитайте эквивалентное значение во всех остальных единицах по мере его обновления вживую.
- Нажмите кнопку копирования рядом с единицей, чтобы получить значение с его суффиксом.
- Используйте таблицу краткой справки для распространённых пар px-в-rem при вашей базе.
Пример
Ввод
/* root font-size: 16px */
.card { padding: 24px; }
Результат
.card { padding: 1.5rem; }
/* 24px = 1.5rem = 18pt = 150% at base 16px */
При базе 16px значение 24px равно 1.5rem — удобно для перевода макета на rem.
Частые ошибки и устранение неполадок
- Результаты rem и % выглядят неверно, хотя px правильный. — Проверьте корневой размер шрифта. rem, em и % разрешаются относительно этой базы, поэтому задайте её равной font-size на вашем элементе :root или html.
- pt не совпадает с тем, что вы видите в дизайн-инструменте. — Этот конвертер использует определение CSS, где 1pt = 96/72 px (1.3333px). Печатные или DTP-инструменты могут предполагать 72dpi, что даёт 1pt = 1px.
- em и rem показывают одно и то же число, хотя вы ожидали разницу. — Конвертер использует единую базу для обоих ради простоты. В реальном CSS em относителен собственному размеру шрифта элемента, а rem — корневому, поэтому они расходятся только когда родитель меняет font-size.
- Поля очищаются, когда корневой размер шрифта оставлен пустым. — Пустая или нулевая база считается недопустимой; конвертер возвращается к 16px. Введите положительное число, чтобы самостоятельно задать rem, em и %.
Часто задаваемые вопросы
- Как преобразовать px в rem?
- Введите значение в пикселях в поле px и прочитайте поле rem. rem — это значение, делённое на корневой размер шрифта, поэтому при базе по умолчанию 16px значение 16px равно 1rem, а 24px — 1.5rem.
- Как преобразовать rem в px?
- Введите значение в поле rem и прочитайте px. rem в px — это значение, умноженное на корневой размер шрифта, поэтому 2rem при базе 16px равно 32px.
- Какой базовый размер шрифта использует конвертер?
- По умолчанию 16px, стандартный браузерный корневой размер шрифта, и вы можете изменить его в поле «Корневой размер шрифта». Эта база определяет каждый результат rem, em и %, чтобы они совпадали с вашей таблицей стилей.
- Почему 1pt здесь равен 1.3333px?
- CSS определяет 1pt как 1/72 дюйма, а 1px как 1/96 дюйма, поэтому 1pt = 96/72 px = 1.3333px. Именно поэтому 12pt преобразуется ровно в 16px, распространённый размер основного текста.
- В чём разница между em и rem?
- rem относителен корневому размеру шрифта, а em — собственному размеру шрифта элемента. Этот инструмент использует единую базу для обоих ради простоты, поэтому они показывают одинаковое значение; задайте корневой размер шрифта, чтобы смоделировать сторону rem.
- Выполняется ли преобразование на сервере?
- Нет. Преобразование единиц CSS выполняется полностью в вашем браузере обычной арифметикой, поэтому введённые значения остаются на вашем устройстве.
Связанные инструменты
- Конвертер цветов CSS — Преобразуйте между HEX, RGB и HSL с живым образцом цвета.
- Форматировщик CSS / SCSS — Форматируйте или минифицируйте CSS/SCSS/LESS, сортируйте свойства и убирайте дубликаты.
- Проверка контраста — Проверяйте коэффициент контраста WCAG и соответствие AA/AAA между двумя цветами.
- Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.
- Форматировщик JS / TS — Форматируйте или минифицируйте JavaScript, TypeScript и JSX/TSX с настройками Prettier.
Все инструменты ArrayKit