Конвертер px, rem и em
Переведите rem в px или px в rem: введите значение, задайте базовый размер шрифта — результат посчитается сразу.
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
Умножьте значение в rem на базовый размер шрифта. По умолчанию он равен 16px, поэтому 1rem = 16px, 1.5rem = 24px, 2rem = 32px. Формула: px = rem × базовый размер. Введите значение в конвертер выше — он посчитает сам, в том числе для нестандартной базы.
Разделите пиксели на базовый размер шрифта: rem = px ÷ 16. Например, 24px ÷ 16 = 1.5rem, а 12px ÷ 16 = 0.75rem. Отсюда популярный трюк с базой 10px: при font-size: 62.5% на корне 1rem становится равен 10px, и деление в уме превращается в сдвиг запятой.
В большинстве браузеров 1rem = 16px, потому что таков размер шрифта по умолчанию у корневого элемента html. Но это значение не константа: если пользователь увеличил шрифт в настройках браузера или вы переопределили font-size у html, вместе с ним изменятся и все размеры в rem — в этом и весь смысл единицы.
Rem всегда считается от корневого элемента, а em — от размера шрифта родителя. Из-за этого em накапливается: вложите три элемента с font-size: 0.9em, и на третьем уровне получите 0.73 от исходного размера. Rem от вложенности не зависит и потому предсказуемее. Em остаётся удобен там, где размер должен зависеть от текста рядом, — например, отступ внутри кнопки.
Rem — для всего, что должно масштабироваться вместе с настройками пользователя: шрифты, отступы, ширины блоков. Px — для того, что масштабироваться не должно: границы в 1px, тонкие разделители, размеры иконок. Смешивать их нормально, главное — понимать, почему в каждом месте выбрана своя единица.
Люди с ослабленным зрением увеличивают шрифт в настройках браузера. Размеры в rem подхватят это изменение автоматически, а жёстко заданные в px — нет: текст останется мелким, и человек просто не сможет прочитать сайт. Это не теория, а частая причина жалоб на нечитаемые интерфейсы.