PX в REM/EM конвертер
Конвертируйте между px, rem и em CSS единицами с настраиваемым базовым размером шрифта
16px
Часто используемые размеры
Типографика
Отступы
Общие размеры
Таблица популярных значений
| PX | REM | EM | % | PT |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 50% | 6pt |
| 10px | 0.625rem | 0.625em | 62.5% | 7.5pt |
| 12px | 0.75rem | 0.75em | 75% | 9pt |
| 14px | 0.875rem | 0.875em | 87.5% | 10.5pt |
| 16px | 1rem | 1em | 100% | 12pt |
| 18px | 1.125rem | 1.125em | 112.5% | 13.5pt |
| 20px | 1.25rem | 1.25em | 125% | 15pt |
| 24px | 1.5rem | 1.5em | 150% | 18pt |
| 28px | 1.75rem | 1.75em | 175% | 21pt |
| 32px | 2rem | 2em | 200% | 24pt |
| 36px | 2.25rem | 2.25em | 225% | 27pt |
| 40px | 2.5rem | 2.5em | 250% | 30pt |
| 48px | 3rem | 3em | 300% | 36pt |
| 64px | 4rem | 4em | 400% | 48pt |
О единицах измерения CSS
Абсолютные единицы
- • px - пиксели, фиксированный размер
- • pt - пункты (1pt = 1/72 дюйма)
- • cm, mm, in - физические единицы
Относительные единицы
- • rem - относительно корневого элемента
- • em - относительно родительского элемента
- • % - процент от родителя
- • vw/vh - процент от viewport
Рекомендации
- • Используйте rem для типографики
- • Применяйте em для отступов компонентов
- • Избегайте px для адаптивного дизайна
- • Комбинируйте единицы для гибкости
Похожие инструменты
Другие полезные инструменты из той же категории
CSS градиент генератор
Создавайте линейные, радиальные и конические CSS градиенты с визуальным редактором
css
gradient
+4
CSS Box Shadow генератор
Генерируйте CSS box-shadow с визуальным предпросмотром и множественными тенями
css
box-shadow
+3
Конвертер цветов
Конвертируйте цвета между HEX, RGB, HSL, CMYK, LAB и другими цветовыми моделями
color
converter
+4