PX to REM/EM Converter
Convert between px, rem, and em CSS units with custom base font size
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 для адаптивного дизайна
- • Комбинируйте единицы для гибкости
Related Tools
Other useful tools from the same category
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with visual editor
css
gradient
+4
CSS Box Shadow Generator
Generate CSS box-shadow with visual preview and multiple shadows
css
box-shadow
+3
Color Converter
Convert colors between HEX, RGB, HSL, CMYK, LAB, and other color models
color
converter
+4