Network Tools

Конвертер единиц CSS — px, rem, em, % онлайн

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

Конвертируйте px, rem, em, % онлайн — бесплатный CSS Unit Converter с настраиваемым базовым размером шрифта. Таблица конвертации единиц, конвертация CSS кода с учетом вложенности. Работает в браузере, без загрузки, приватно.

16px(16px)

Таблица конвертации

px
16.0000
rem
1.0000
em
1.0000
%
100.0000

Таблица предустановленных значений

Часто используемые значения, автоматически конвертированные на основе базового размера шрифта

pxremem%
4px
0.2500rem
0.2500em
25.0000%
6px
0.3750rem
0.3750em
37.5000%
8px
0.5000rem
0.5000em
50.0000%
10px
0.6250rem
0.6250em
62.5000%
12px
0.7500rem
0.7500em
75.0000%
14px
0.8750rem
0.8750em
87.5000%
16px
1.0000rem
1.0000em
100.0000%
18px
1.1250rem
1.1250em
112.5000%
20px
1.2500rem
1.2500em
125.0000%
24px
1.5000rem
1.5000em
150.0000%
28px
1.7500rem
1.7500em
175.0000%
32px
2.0000rem
2.0000em
200.0000%
36px
2.2500rem
2.2500em
225.0000%
40px
2.5000rem
2.5000em
250.0000%
48px
3.0000rem
3.0000em
300.0000%
56px
3.5000rem
3.5000em
350.0000%
64px
4.0000rem
4.0000em
400.0000%
72px
4.5000rem
4.5000em
450.0000%
80px
5.0000rem
5.0000em
500.0000%
96px
6.0000rem
6.0000em
600.0000%

Онлайн конвертер единиц CSS: px, rem, em и % — Полное руководство

В современной веб-разработке адаптивность и доступность интерфейсов играют ключевую роль. Наш CSS Unit Converter — это мощный инструмент для frontend-разработчиков и веб-дизайнеров, который автоматизирует расчеты размеров шрифтов и отступов. Забудьте о калькуляторе и ручных формулах: конвертируйте px в rem, em или проценты мгновенно.

Как работает конвертер CSS?

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

Базовый размер шрифта (Base Font Size)

Все относительные единицы (rem, em, %) зависят от базового размера шрифта. По стандарту в браузерах это 16px, но в дизайн-системах часто используются 14px, 18px или 20px. Наш инструмент позволяет задать любой базовый размер и сохраняет его в настройках табов. Вы можете создать отдельные вкладки для разных проектов и переключаться между ними без потери контекста.

Мгновенная конвертация (Unit Converter)

Просто введите значение в любое поле (например, в пикселях), и калькулятор автоматически пересчитает его в остальные единицы:

  • PX (Pixels): Абсолютная единица, точная и предсказуемая.
  • REM (Root EM): Относительно корневого элемента <html>. Стандарт для адаптивной типографики.
  • EM: Относительно родительского элемента. Идеально для масштабируемых компонентов.
  • % (Procents): Процентное соотношение от базового размера.

Конвертация CSS кода с учетом вложенности

Уникальная функция нашего сервиса — режим CSS Code Converter. Вставьте готовый CSS-код, выберите направление конвертации (например, из px в rem), и алгоритм переработает весь код. Инструмент учитывает вложенность селекторов и свойство font-size у родителей, чтобы корректно рассчитать сложные значения em.

PX vs REM vs EM: Что выбрать?

Понимание разницы между единицами измерения критически важно для качественной верстки.

Почему стоит использовать REM вместо PX?

Использование rem позволяет пользователям масштабировать интерфейс через настройки браузера (например, для слабовидящих). Если сайт сверстан жестко в px, изменение размера шрифта в браузере не повлияет на верстку, что ухудшает доступность (a11y).

Когда использовать EM?

Единица em полезна для создания компонентов, где отступы (padding, margin) должны зависеть от размера шрифта самого элемента. Однако с em нужно быть осторожным из-за эффекта каскадного наследования (compounding). Наш конвертер помогает отслеживать эти зависимости.

Преимущества нашего инструмента

  • Мультизадачность: Система табов позволяет работать над несколькими проектами одновременно, сохраняя настройки для каждого.
  • Сохранение прогресса: Все данные, включая активный таб и настройки округления, автоматически сохраняются в LocalStorage браузера. Вы не потеряете данные при перезагрузке страницы.
  • Гибкая настройка: Выбирайте точность округления (количество знаков после запятой), чтобы код соответствовал стандартам вашей команды.

Other Developer Tools

🔐

Base64 Encoder/Decoder

Кодирование и декодирование Base64

🎫

JWT Decoder

Декодирование JWT токенов

🔑

Hash Generator

Генерация хешей (MD5, SHA-1, SHA-256)

🔎

Regex Tester

Проверка регулярных выражений

🆔

UUID Generator

Генерация UUID v4

🔗

URL Encoder/Decoder

Кодирование и декодирование URL

🔤

HTML Entity Encoder/Decoder

Кодирование и декодирование HTML сущностей

📊

CSV/JSON/XML Converter

Конвертация между CSV, JSON и XML форматами

📄

Formatter/Validator

Форматирование и валидация JSON, XML, CSV

💻

slug-generator

💻

bcrypt-generator

Изучите другие категории

🖼️

Image Tools

All image processing tools: converter, resizer, and cropper

18 tools
📝

Text Tools

Text processing and manipulation tools

5 tools
🌐

Web Tools

Web development tools: Favicon Generator, CSS Unit Converter, SVG to Image

3 tools
🌐

Network Tools

Network utilities: Subnet Calculator, DNS Lookup

2 tools

Вступление

CSS Unit Converter помогает переводить значения между CSS-единицами: px, rem, em, %, vw, vh и другими. Такой инструмент особенно полезен во фронтенде, где один и тот же размер может понадобиться в разных единицах в зависимости от контекста. Например, дизайнер передал отступ в пикселях, а в проекте принято использовать rem, чтобы интерфейс лучше масштабировался.

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

Инструмент полезен и для командной работы. Дизайнеры часто мыслят в пикселях, а разработчики — в rem, em или viewport-единицах. Конвертация помогает быстрее договориться о конкретных значениях и сохранить консистентность интерфейса.

Как использовать

1. Введите число и выберите исходную единицу: например, px или rem. 2. При необходимости укажите базовое значение, например root font size для rem. 3. Получите результат и скопируйте его в CSS.

Примеры

  • Ввод: 16px, база 16px

Вывод: 1rem

  • Ввод: 24px, база 16px

Вывод: 1.5rem

  • Ввод: 50vw при ширине viewport 1200px

Вывод: 600px

Советы

  • Перед переводом между px, rem и em всегда уточняйте базовый размер шрифта.
  • Для типографики и масштабируемых интерфейсов rem часто удобнее фиксированных пикселей.
  • С vh и vw на мобильных устройствах стоит быть осторожнее из-за особенностей браузеров.

FAQ

Чем rem отличается от em?

rem зависит от размера шрифта корневого элемента, а em — от текущего элемента.

Зачем переводить px в rem?

rem обычно лучше подходит для доступности, масштабирования и единых дизайн-систем.

Всегда ли viewport-единицы работают предсказуемо?

Не всегда. На мобильных устройствах высота видимой области может меняться вместе с интерфейсом браузера.