Перевести rem в px Root em ↔ Pixels Бесплатно Онлайн Безопасно

Зачем конвертировать rem в px

Вы открываете таблицу стилей и видите padding: 2.25rem у карточки и font-size: 0.8125rem у подписи. Это хорошие значения, записанные так, как должен писаться современный CSS, но с первого взгляда они ничего не говорят. Насколько велик этот отступ карточки на экране? Будет ли подпись читаемой? Совпадает ли она с 36 px и 13 px в макете, который вам передали? Чтобы ответить, вы конвертируете rem в px: умножаете на размер шрифта корня и читаете ответ в единице, которой пользуются инструменты дизайна. Это обратное обычному направление, и именно так поступают, когда читают код, сверяют макет со сборкой или объясняют вёрстку тому, кто думает в пикселях.

Конвертация проста; страницу оправдывает база. rem — это не размер, а кратное размера, а именно размера шрифта корневого элемента. В браузере, которому никто не говорил иного, этот размер равен 16 px, поэтому 1 rem — это 16 px, 2,25 rem — 36 px, а 0,8125 rem — 13 px. Но корень может быть изменён таблицей стилей, и читатель может изменить его в браузере, и тогда каждое значение в rem на странице сдвигается вместе с ним. Поэтому страница запрашивает базу и использует её, а не прячет.

Вычисление происходит в вашем браузере, и ничего не загружается. Ниже вы найдёте формулу, таблицу распространённых значений, то, что конвертация сохраняет и чего не может сохранить, ситуации, в которых разработчикам нужно конвертировать rem в px, и несколько привычек, помогающих держать таблицу стилей на rem легко читаемой.

Формула и база

px равно rem, умноженному на базу

Формула — одно умножение: px = rem × база. При обычной базе 16 px значение 1,5 rem превращается в 24 px, 0,75 rem — в 12 px, а 4 rem — в 64 px. Страница выводит базу рядом с результатом, поэтому строка вроде 1,5 rem = 24 px (16 px) сообщает, что именно предполагалось, и вы сразу видите, совпадает ли это с вашим проектом.

Как узнать свою базу

Поищите в таблице стилей правило для html или :root, задающее font-size. Если его нет, база — это значение браузера по умолчанию, 16 px. Если оно есть, например 62,5%, возьмите этот процент от 16: 62,5% дают 10 px. В инструментах разработчика браузера можно также выделить корневой элемент и прочитать его вычисленный размер шрифта — это и есть число для поля базы.

Когда размер корня плавающий

Некоторые сайты делают размер корня растущим вместе с окном, используя выражение clamp. Тогда у 1 rem вообще нет единого значения в пикселях: он составляет 15 px на телефоне и 18 px на широком мониторе. В этом случае любая конвертация — это моментальный снимок. Введите базу, которую видите при интересующей вас ширине, и помните, что ответ действителен только при этой ширине.

Что конвертация сохраняет, а чего не может

Она сохраняет пропорцию

Один rem — это то, чему равен размер шрифта корня, поэтому вёрстка, написанная в rem, сохраняет форму, когда этот размер меняется. Когда вы конвертируете rem в px, значение в пикселях — это та же пропорция, ставшая конкретной для одной определённой базы. Отношение двух размеров, например заголовка в 2 rem к основному тексту в 1 rem, не меняется, как бы вы ни конвертировали, а от этого отношения и зависит хорошая вёрстка.

Она не может знать настройки читателя

Число целиком зависит от базы. Если читатель увеличил размер текста по умолчанию в браузере, что делают многие и имеют на это право, то для него 1 rem — это не 16 px, и видимое вами число верно лишь для базы из поля. Относитесь к значению в пикселях как к способу понять дизайн, а не как к обещанию того, что увидит каждый посетитель.

Округление

Поскольку база обычно целое число, результат умножения обычно точен. 0,8125 rem — это ровно 13 px при базе 16; 0,6875 rem — ровно 11 px. Если вы получили длинную десятичную дробь, это признак того, что значение в rem было вычислено от другой базы, чем та, которую вы ввели.

Распространённые значения

Таблица внизу страницы

Страница содержит таблицу значений в пикселях, которым соответствуют распространённые числа в rem при заданной вами базе: 0,5 rem — это 8 px, 0,625 — 10, 0,75 — 12, 0,875 — 14, 1 — 16, 1,125 — 18, 1,25 — 20, 1,5 — 24, 2 — 32, 3 — 48 и 4 — 64. Эти значения чаще всего встречаются в отступах и типографских шкалах, и знание их наизусть делает таблицу стилей читаемой с первого взгляда.

Чтение таблицы стилей в пикселях

Полезное упражнение — взять таблицу стилей, которую вы не писали, один раз перевести её основные значения в пиксели и записать результаты в заметку. Основной размер в 1 rem, заголовки в 1,5 и 2,25 rem, промежуток контейнера в 2 rem: в пикселях это 16, 24, 36 и 32. Увидев это, вы заметите логику дизайна и сможете сравнить её с макетом без калькулятора.

Как конвертировать rem в px здесь

Введите значение в rem

Введите размер в rem в первое поле. Десятичные дроби принимаются, поэтому 0,8125 подходит так же, как 1.

Задайте базу

Оставьте 16, если ваш CSS не меняет размер корня. Измените, если меняет. Результат обновляется по мере ввода.

Прочитайте значение в пикселях

Ответ появляется сразу, а база показана рядом с ним, поэтому вы можете понять, что предполагалось. Скопируйте его в свои заметки или сравните с макетом.

Откуда берутся эти единицы

CSS-пиксель

Когда у дисплеев перестала быть предсказуемая плотность, страница, измеренная в настоящих пикселях, стала страницей, которая уменьшалась по мере того, как экраны становились чётче. Поэтому CSS-пиксель переопределили как эталонную длину: примерно 1/96 дюйма при удобном расстоянии чтения. Пиксель в таблице стилей — это, таким образом, не точка на вашем экране, а единица длины, которую браузер отображает на столько точек, сколько нужно экрану.

rem

Em старше веба: в металлическом наборе это была ширина литой заготовки, названная по заглавной букве M, а в CSS это означает действующий размер шрифта, поэтому она меняется при вложении элементов. rem добавили, чтобы избежать именно этого: это em корневого элемента, и он никогда не накапливается. Чтобы увидеть разницу в числах, конвертируйте px в em и сравните с тем, что получите, когда конвертируете rem в px.

Когда разработчики конвертируют rem в px

Сверка сборки с макетом

Дизайнер передаёт файл в пикселях; разработчик писал код в rem. Чтобы проверить, что страница совпадает, он конвертирует rem в px и сравнивает числа. Расхождение видно сразу: 1,375 rem — это 22 px, и если в макете 24, одно из них неверно.

Чтение незнакомого кода

Когда вы наследуете таблицу стилей, значения в rem скрывают настоящие размеры. Конвертация нескольких основных даёт вам карту дизайна: насколько велик шрифт, насколько широки поля, где проходят точки останова.

Написание отчётов об ошибках и документации

Люди, тестирующие страницу, описывают увиденное в пикселях. Разработчик, говорящий, что отступ равен 2,5 rem, мало что сообщает тестировщику; 40 px — это уже что-то. Конвертация помогает сторонам понять друг друга.

Задание значений, которые должны быть точными в пикселях

Некоторые вещи должны быть точным числом физических пикселей, иначе выглядят размыто: однопиксельная рамка, значок, нарисованный на сетке 24 px. Если размер должен попасть в пиксельную сетку, конвертация rem в px подскажет, попадает ли он при вашей базе.

Ловушки при конвертации rem в px

Забытый изменённый размер корня

Если корень задан как 62,5% или выражением clamp, стандартный коэффициент 16 не применяется. Результат неверен на отношение двух баз. Всегда сначала проверяйте базу.

Путаница rem и em

Em отсчитывается от собственного размера шрифта элемента, а не от корня. Значение 1.5em внутри заголовка в 24 px — это 36 px, но внутри абзаца в 16 px — 24 px. Эта страница конвертирует rem, у которого нет такой неоднозначности. Про em смотрите em в px.

Предположение, что экран показывает те же пиксели

CSS-пиксель — это не физический пиксель. На дисплее высокой плотности один CSS-пиксель может быть двумя или тремя физическими. Конвертация даёт CSS-пиксели, которыми пользуются и инструменты дизайна, и таблица стилей.

Слишком раннее округление

Если вы округлите 13.333 px до 13, а затем конвертируете обратно, получите 0,8125 rem, а не 0,8333, с которых начинали. Сохраняйте исходное значение в rem, когда это важно.

Вопросы, которые задают перед конвертацией

Сколько пикселей в 1 rem?

Шестнадцать, в браузере, значение по умолчанию которого не менялось.

Сколько пикселей в 2 rem?

Тридцать два при базе по умолчанию. При базе 10 было бы 20.

Почему мой браузер показывает другое?

Настройка читателя или правило в таблице стилей изменило размер корня. Посмотрите вычисленный размер шрифта корневого элемента в инструментах разработчика.

rem — то же, что em?

Нет. rem относится к корневому элементу, а em — к самому элементу.

Загружается ли моё число?

Нет. Вычисление выполняется в вашем браузере, и ничего никуда не отправляется.

Как вернуться обратно?

С помощью px в rem, который делит, а не умножает.

Привычки, облегчающие чтение таблицы стилей на rem

Пишите значение в пикселях в комментарии

Строка вроде gap: 1.5rem; /* 24px */ стоит нескольких символов и избавляет следующего читателя от конвертации. Она также фиксирует предполагаемую вами базу.

Используйте небольшую шкалу

Проект, использующий лишь горстку значений в rem, например 0.5, 1, 1.5, 2 и 3, легко выучить: через день вы знаете их в пикселях, не задумываясь. Когда вы конвертируете rem в px для такой таблицы стилей, вы лишь подтверждаете то, что помните.

Давайте значениям имена

С пользовательскими свойствами вроде --space-md: 1.5rem таблица стилей описывает замысел, а не числа. Имя несёт смысл, а число находится в одном месте.

Проверяйте с другим размером по умолчанию

Увеличьте размер текста по умолчанию в браузере и посмотрите на страницу. Если она не рассыпается, вёрстка действительно построена на rem. Если ломается, что-то осталось в пикселях.

Как хорошо использовать значение в пикселях после конвертации rem в px

Сравнивайте отношения, а не только числа

Когда вы конвертируете rem в px для всей таблицы стилей, смотрите на отношения между размерами, а не только на сами размеры. Типографская шкала, в которой каждый шаг примерно в 1,25 раза больше предыдущего, даёт 16, 20, 25, 31 и 39 пикселей; шкала с коэффициентом 1,5 даёт 16, 24, 36 и 54. Заметив отношение, вы поймёте замысел дизайнера и сможете последовательно расширить шкалу, когда понадобится новый размер.

Переводите для тех, кто думает в пикселях

Не все в команде читают rem. Менеджеры проектов, копирайтеры и клиенты часто работают по скриншотам и просят сделать заголовок чуть больше. Если вы можете сказать, что заголовок сейчас 36 px, а при 2,5 rem стал бы 40 px, разговор будет коротким. Страница полезна как быстрый мост между двумя словарями.

Проверяйте области касания и минимальные размеры

Рекомендации для сенсорных экранов требуют областей не менее примерно 44 px, а рекомендации для текста требуют основного текста около 16 px или больше. Обе даны в пикселях. Чтобы сверить таблицу стилей на rem с ними, конвертируйте rem в px и посмотрите, проходят ли кнопки и текст эту планку.

Помните о случае с увеличением

Полученное значение относится к введённой вами базе. Если ваши читатели могут увеличивать текст, повторите конвертацию с базой 20 или 24 и посмотрите, чего вёрстка требует от экрана. Карточка, удобная при 16, может переполниться при 24, и лучшее время узнать об этом — до публикации страницы.

Связанные конвертеры

То же семейство инструментов охватывает соседние конвертации. Чтобы вернуться к rem, используйте px в rem. Для размеров относительно элемента есть px в em и em в px, а для размеров относительно экрана — px в vw и vw в px. Для цветов в той же таблице стилей под рукой HEX в RGB и HSL в HEX, а для имён классов текст в kebab-case превращает фразу в имя, которое принимает CSS.

Разобранный пример

Допустим, вы проверяете запрос на слияние, и в таблице стилей есть главный блок с padding: 5rem 1.5rem, заголовком 3.5rem и вводным абзацем 1.25rem. В макете указаны отступы 80 px и 24 px, заголовок 56 px и вводный абзац 20 px. Вы вводите 5 и читаете 80 px, вводите 1,5 и читаете 24, вводите 3,5 и читаете 56, вводите 1,25 и читаете 20. Все четыре совпадают, значит, сборка точна. Если бы заголовок был 3.25 rem, вы прочитали бы 52 и заметили бы разницу, прежде чем она дошла до дизайнера.

Короткий контрольный список

Перед конвертацией

Найдите базу: корневое правило в таблице стилей или вычисленный размер в инструментах разработчика.

Во время конвертации

Введите значение в rem, проверьте базу, показанную рядом с результатом, и запишите значение в пикселях.

После конвертации

Сравните с макетом. Если числа различаются, проверьте базу, прежде чем подозревать код.

Частые ошибки

Использование 16 без проверки

Это значение по умолчанию, а не правило. Проверьте корень.

Принятие пикселей за окончательные

Ответ верен для одной базы. Читатель с большим значением по умолчанию видит большие пиксели.

Путаница rem и em

Они похожи и ведут себя по-разному. Пользуйтесь нужной страницей для каждого.

Ваши числа остаются на вашем устройстве

Вычисление происходит локально. Ваши значения использует ваш собственный браузер, и ничего никуда не отправляется. Потом нечего удалять, и не нужно создавать учётную запись. Вот простой способ конвертировать rem в px.

Итог

Чтобы конвертировать rem в px здесь, введите размер в rem и сразу читайте его в пикселях по формуле px = rem × база. База начинается с 16 px, значения браузера по умолчанию, и вы можете изменить её под свой CSS. Конвертация сохраняет пропорцию, поскольку один rem — это то, чему равен размер шрифта корня, и она не может знать настройки вашего читателя, поэтому число верно лишь для базы в поле. Таблица распространённых значений, от 0,5 rem при 8 px до 4 rem при 64 px, помогает читать таблицу стилей с первого взгляда. Ничего не загружается.