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

Конвертер CSS-единиц — калькулятор px, rem, em, %

🎨 Переводите CSS-единицы: пиксели (px), rem, em, проценты (%), пункты (pt) и viewport-единицы (vw, vh). Незаменимый инструмент для адаптивного веб-дизайна и разработки.

Типы CSS-единиц

• Абсолютные единицы: px, pt, cm, mm, in — фиксированный размер независимо от контекста
• Относительные единицы: rem, em, %, vw, vh — масштабируются относительно родителя или viewport
• Единицы относительно шрифта: rem, em, ch, ex — зависят от размера шрифта
• Единицы относительно viewport: vw, vh, vmin, vmax — зависят от размеров окна просмотра

Пояснения к единицам

• px (пиксели): 1px = 1 пиксель устройства. Абсолютная, точная, но не масштабируемая единица.
• rem: Относительно корневого элемента (html). По умолчанию 1rem = 16px.
• em: Относительно размера шрифта родителя. Может «накапливаться» во вложенных элементах.
• %: Относительно свойства родителя. 100% = как у родителя.
• pt (пункты): Печатная единица. 1pt = 1/72 дюйма ≈ 1.333px.
• vw: 1vw = 1% ширины viewport. 100vw = полная ширина.
• vh: 1vh = 1% высоты viewport. 100vh = полная высота.

Частые преобразования

• 1rem = 16px (настройка браузера по умолчанию)
• 1em = 16px (если у родителя 16px)
• 100% = размер родительского элемента
• 12pt = 16px (часто в печати)
• 1vw = 19.2px (при ширине viewport 1920px)

Метод 62.5%

Установите html { font-size: 62.5%; }, чтобы 1rem = 10px. Так считать проще: 1.6rem = 16px, 2.4rem = 24px и т.д.

Доступность

• Используйте rem для шрифтов: учитывает настройки размера шрифта пользователя
• Избегайте px для шрифтов: не масштабируется с настройками пользователя
• Используйте относительные единицы: удобнее для зума/увеличения
• Тестируйте разные размеры: проверьте 200% zoom и режим «крупный текст»

Адаптивный дизайн

Используйте rem в media query: @media (min-width: 48rem) вместо 768px. Так брейкпоинты масштабируются вместе с предпочтениями пользователя по размеру шрифта.

💡 Профи-совет: современная практика — использовать rem для большинства размеров (шрифты, отступы, брейкпоинты), px для границ и тонких деталей, а % или viewport-единицы — для раскладок. Избегайте em для отступов — он может накапливаться.