Что такое конвертер REM в PX?
Конвертер REM в PX — это инструмент, который переводит относительные единицы rem в пиксели (px). В веб-разработке rem — это относительная единица, привязанная к размеру шрифта корневого элемента (как правило, элемента <html>), тогда как px — абсолютная единица. Конвертер помогает разработчикам создавать масштабируемые и доступные макеты и при этом понимать, какому реальному размеру в пикселях соответствуют их значения в rem.
Когда пригодится конвертер REM в PX
Инструмент особенно полезен в следующих ситуациях:
- При создании адаптивных сайтов, когда нужно переводить значения между относительными и абсолютными единицами
- При работе с дизайн-системами на основе rem, когда для справки требуются значения в пикселях
- При вёрстке по макетам, где размеры заданы в пикселях, но писать код удобнее в rem
Как рассчитать REM в PX
Перевод из rem в px выполняется по простой формуле:
PX = REM × размер корневого шрифта
Где:
- PX — итоговое значение в пикселях
- REM — переводимое значение в относительных единицах
- Размер корневого шрифта — базовый размер шрифта элемента html (по умолчанию в большинстве браузеров это 16px)
Таким образом, значение rem зависит от размера корневого шрифта. Это значит, что если вы зададите в CSS размер шрифта 16px для <html>, например так:
то 1rem будет равен 16px.
Примеры
Базовый перевод REM в PX
Переведём 1.5rem в пиксели при размере корневого шрифта по умолчанию — 16px.
| Значение в REM | Размер корневого шрифта | Вычисление | Результат |
|---|---|---|---|
| 1.5rem | 16px | 1.5 × 16 | 24px |
Перевод нескольких значений REM
Переведём 0.75rem, 2rem и 3.5rem в пиксели при размере корневого шрифта 16px.
| Значение в REM | Размер корневого шрифта | Вычисление | Результат |
|---|---|---|---|
| 0.75rem | 16px | 0.75 × 16 | 12px |
| 2rem | 16px | 2 × 16 | 32px |
| 3.5rem | 16px | 3.5 × 16 | 56px |
Нестандартный размер корневого шрифта
Переведём 2.5rem в пиксели при нестандартном размере корневого шрифта 20px.
| Значение в REM | Размер корневого шрифта | Вычисление | Результат |
|---|---|---|---|
| 2.5rem | 20px | 2.5 × 20 | 50px |
Таблица распространённых значений REM в PX
Ниже — справочная таблица перевода популярных значений rem в пиксели (исходя из размера корневого шрифта по умолчанию — 16px):
| Значение в REM | Значение в пикселях |
|---|---|
| 0.25 rem | 4 px |
| 0.5 rem | 8 px |
| 0.75 rem | 12 px |
| 0.875 rem | 14 px |
| 1 rem | 16 px |
| 1.125 rem | 18 px |
| 1.25 rem | 20 px |
| 1.5 rem | 24 px |
| 1.875 rem | 30 px |
| 2 rem | 32 px |
| 2.25 rem | 36 px |
| 2.5 rem | 40 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
Похожие калькуляторы
Чтобы найти больше инструментов для веб-разработки и дизайна, загляните в эти калькуляторы:
