Pixel ↔ REM
Конвертируйте между пикселями и REM
Как использовать Pixel ↔ REM
Конвертируйте между пикселями и REM Бесплатный онлайн-инструмент, без регистрации, без навязчивой рекламы. Используйте прямо сейчас.
Зачем веб-разработчикам конвертировать пиксели в REM?
Современные лучшие практики CSS рекомендуют использовать относительные единицы (REM, EM) вместо абсолютных пикселей для размеров шрифтов и отступов. Это позволяет пользователям, установившим более крупный шрифт в настройках браузера, видеть пропорционально масштабированный текст — базовое требование веб-доступности.
- Размеры шрифтов: Вместо
font-size: 16pxиспользуйтеfont-size: 1rem. Если базовый размер шрифта в браузере пользователя равен 20px, всё масштабируется пропорционально — сайт остаётся читаемым для людей с нарушениями зрения. - Отступы и padding: Отступы в REM адаптируются к настройкам текста пользователя.
padding: 1.5remдоступнее, чемpadding: 24px. - Реализация дизайн-системы: Figma и Sketch экспортируют в пикселях. Конвертируйте в REM перед написанием CSS, чтобы система была доступной изначально.
- Медиазапросы: Медиазапросы на основе REM учитывают настройки текста пользователя.
@media (min-width: 48rem)срабатывает на 768px при базовом шрифте 16px, но при другом значении базового шрифта — иначе. - Библиотеки компонентов: Компоненты на REM одинаково ведут себя в разных контекстах базового размера шрифта — важно при построении переиспользуемых дизайн-систем.
REM vs EM: REM (Root EM) всегда относителен к размеру шрифта корневого элемента (html) — постоянен и предсказуем во всём документе. EM относителен к размеру шрифта текущего элемента — может непредсказуемо накапливаться в вложенных элементах. REM предпочтительнее для большинства задач.
Каков размер шрифта по умолчанию в браузере?
16px во всех основных браузерах (Chrome, Firefox, Safari, Edge). Пользователь может изменить это в настройках — и именно для этого используется REM. 1rem = 16px по умолчанию, но может быть 18, 20 или 12px в зависимости от пользовательских настроек.
Зачем некоторые разработчики используют html { font-size: 62.5% }?
62,5% от 16px = 10px — делает вычисления удобнее: 1,6rem = 16px, 2,4rem = 24px. Однако это переопределяет пользовательские настройки шрифта, частично нивелируя преимущества доступности REM. Лучше использовать CSS calc() или просто делить на 16.
Когда использовать PX, а не REM?
PX — для рамок (border: 1px должна оставаться 1px), теней и элементов, где важен точный пиксельный размер независимо от настроек. REM — для размеров шрифтов, padding, margin и любых отступов, которые должны масштабироваться вместе с текстом.
В чём разница между REM, EM и PX?
PX — абсолютная единица, размер не меняется. EM — относителен к размеру шрифта родительского элемента, может накапливаться при вложенности. REM — относителен к корневому шрифту, постоянен во всём документе. Для доступного дизайна используйте REM для шрифтов и отступов.
Как перевести весь дизайн с пикселей на REM?
Разделите каждое значение в пикселях на базовый размер шрифта (по умолчанию: 16). 24px ÷ 16 = 1,5rem. Sass-функции (px-to-rem()) или PostCSS-плагины автоматизируют эту конвертацию во всём проекте. Есть также расширения VS Code для автоматической конвертации при вводе.
REM vs EM vs PX vs VW/VH vs проценты
PX — абсолютная единица, точность без адаптации. REM масштабируется с корневым шрифтом — оптимально для типографики и доступных отступов. EM масштабируется с шрифтом родительского элемента — удобен для отступов на уровне компонента. VW/VH — проценты от вьюпорта, хороши для адаптивных макетов. Проценты — от родительского элемента, незаменимы для ширин колонок. Современный CSS комбинирует: REM для типографики, VW/VH для общего макета, проценты для ширин колонок.