Что такое конвертер PX в REM?
Конвертер PX в REM — это инструмент, который переводит значения в пикселях (px) в rem-единицы. В CSS rem рассчитывается относительно размера шрифта корневого элемента (html). Такой перевод необходим для создания адаптивных и доступных интерфейсов, которые корректно масштабируются на экранах разного размера и под пользовательские настройки.
Когда пригодится конвертер PX в REM
Этот инструмент стоит использовать в следующих ситуациях:
- при разработке адаптивных сайтов, которые должны пропорционально масштабироваться на разных устройствах;
- при создании доступных интерфейсов, учитывающих выбранный пользователем размер шрифта;
- при переводе готового макета с абсолютных единиц (пикселей) на относительные (rem) для более удобной поддержки кода.
Как перевести PX в REM
Формула перевода пикселей в rem выглядит так:
rem = px ÷ базовый размер шрифта
где:
- rem — итоговое значение в rem-единицах;
- px — значение в пикселях, которое нужно перевести;
- базовый размер шрифта — размер шрифта корневого элемента (в большинстве браузеров это 16px).
Примеры
Пример 1. Перевод размера заголовка из пикселей в rem
Переведём размер заголовка 24px в rem при стандартном базовом размере шрифта 16px.
| Исходные данные | Расчёт | Результат |
|---|---|---|
| Значение в пикселях: 24px Базовый размер шрифта: 16px |
24 ÷ 16 | 1.5rem |
Пример 2. Перевод отступа с нестандартным базовым размером шрифта
Переведём отступ 40px в rem при нестандартном базовом размере шрифта 20px.
| Исходные данные | Расчёт | Результат |
|---|---|---|
| Значение в пикселях: 40px Базовый размер шрифта: 20px |
40 ÷ 20 | 2rem |
Пример 3. Перевод небольшого внутреннего отступа
Переведём внутренний отступ 8px в rem при стандартном базовом размере шрифта 16px.
| Исходные данные | Расчёт | Результат |
|---|---|---|
| Значение в пикселях: 8px Базовый размер шрифта: 16px |
8 ÷ 16 | 0.5rem |
Частые значения перевода пикселей в REM
Ниже — справочная таблица популярных значений в пикселях, переведённых в rem (при стандартном базовом размере шрифта 16px):
| Пиксели | REM |
|---|---|
| 4 px | 0,25 rem |
| 8 px | 0,5 rem |
| 12 px | 0,75 rem |
| 14 px | 0,88 rem |
| 15 px | 0,94 rem |
| 16 px | 1 rem |
| 18 px | 1,12 rem |
| 20 px | 1,25 rem |
| 24 px | 1,5 rem |
| 25 px | 1,56 rem |
| 32 px | 2 rem |
| 40 px | 2,5 rem |
| 48 px | 3 rem |
| 56 px | 3,5 rem |
| 64 px | 4 rem |
| 80 px | 5 rem |
| 300 px | 18,75 rem |
Преимущества REM перед пикселями
Использование rem-единиц в CSS даёт несколько важных преимуществ:
- выше доступность: rem масштабируются вместе с настройками размера шрифта в браузере;
- проще адаптивность: достаточно изменить базовый размер шрифта в медиазапросах;
- более единообразное масштабирование всех элементов;
- удобнее поддержка кода за счёт пропорциональных связей между элементами.
Похожие калькуляторы
Вам также могут пригодиться эти инструменты:
