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

Зачем дизайнеры и разработчики конвертируют px в rem

Инструменты дизайна говорят в пикселях. Макет сообщает, что заголовок — 32 px, промежуток между разделами — 48 px, а у кнопки отступ 16 px. Таблицы стилей, если их написать хорошо, говорят в rem. Разрыв между этими двумя языками — то место, где находится эта страница: вы вводите размер в пикселях и читаете его в rem, чтобы число, которое вы кладёте в CSS, означало то, что имел в виду дизайнер. Конвертировать px в rem — небольшое действие, но за жизнь сайта его выполняют сотни раз, а неверная база превращает аккуратную раскладку в слегка неверную сразу везде.

Причина вообще возиться с rem — доступность и гибкость. Rem — это кратное размеру шрифта корневого элемента, который браузер устанавливает в 16 px, если не сказано иное, и который читатель вправе изменить в своих настройках. Раскладка, написанная в rem, поэтому сохраняет форму, когда человек со слабым зрением повышает размер текста по умолчанию: шрифт, отступы и блоки растут вместе. Раскладка в пикселях не следует за этим, и читатель, попросивший более крупный текст, получает более крупные буквы в тесных блоках или вообще ничего. Вот почему почти каждое современное руководство по стилю говорит одно и то же: используйте rem для шрифта и отступов.

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

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

rem равно px, делённому на базу

Формула — одно деление: rem = px ÷ база. При обычной базе 16 px размер 24 px становится 1,5 rem, 32 px становится 2 rem, а 8 px становится 0,5 rem. Страница показывает результат по мере ввода и показывает использованную базу, так что строка 24 px = 1,5 rem (16 px) говорит вам в точности, что предполагалось.

Откуда берётся 16

База начинается с 16 px, потому что именно это использует браузер, когда никто не говорит иное. Это не закон веба; это умолчание по умолчанию, и оно стабильно десятилетиями. Если ваш CSS не трогает размер шрифта корня, 1 rem — это 16 px для большинства посетителей. Если трогает, база — то, что вы задали.

Приём 62,5% и почему его используют

Некоторые таблицы стилей задают размер корня в 62,5%, что делает 1 rem равным 10 px в браузере по умолчанию, так что 24 px — это просто 2,4 rem, а арифметику легко делать в уме. Это работает, но имеет цену: вся страница теперь зависит от этого процента, и любой компонент, ожидающий 16 как базу, получится слишком мелким. Если ваш проект делает так, введите 10 в поле базы этой страницы, и каждая цифра будет соответствовать вашему CSS.

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

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

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

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

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

Округление

Деление на 16 даёт чистые результаты для многих распространённых размеров (16, 24, 32, 48, 64) и периодические десятичные дроби для других (10 px — это 0,625 rem; 13 px — 0,8125). Страница даёт столько цифр, сколько нужно числу, а вы решаете, сколько оставить в таблице стилей. Браузеры справляются с длинными десятичными дробями без проблем, но округлённое значение вроде 0,8125rem легче читать и поддерживать, чем значение с десятью цифрами.

Распространённые размеры

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

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

Шкала, построенная на rem

Полезная привычка — выбрать небольшой набор значений rem и использовать их повторно: 0,5, 1, 1,5, 2, 3 и 4 для отступов и 0,875, 1, 1,25, 1,5, 2 для шрифта. Дизайнеры называют это шкалой, и она сохраняет визуальное единство сайта. Когда макет даёт вам странное значение вроде 22 px, используйте конвертер, чтобы увидеть, что это 1,375 rem, а затем решите, округлять ли до ближайшего значения вашей шкалы.

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

Введите значение в пикселях

Введите размер в пикселях в первое поле. Десятичные дроби принимаются, поэтому 13,5 px работает так же, как 14.

Проверьте базу

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

Скопируйте значение rem

Прочитайте цифру и используйте её в вашем CSS, с единицей, записанной после неё: font-size: 1.5rem. Не забудьте единицу, поскольку голое число значит что-то другое в большинстве свойств.

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

Пиксель CSS — не пиксель вашего экрана

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

Почему существует rem

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

Где вы встречаете rem на практике

Шрифт

Основной текст обычно 1 rem, заголовки — от 1,25 до 3 rem, мелкий шрифт — от 0,75 до 0,875 rem. Запись их в rem позволяет читателю увеличить всю страницу, изменив одну настройку браузера.

Отступы и раскладка

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

Медиазапросы

Контрольные точки, записанные в em или rem, реагируют на размер текста читателя, поэтому раскладка переключается на узкую форму раньше для того, кто увеличил текст. Это усовершенствование, о котором стоит знать, хотя пиксели остаются распространёнными в контрольных точках.

Что оставить в пикселях

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

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

Забытое, что база не всегда 16

Если проект задаёт html { font-size: 62.5% } или использует плавающий размер корня, коэффициент другой. Проверьте таблицу стилей, прежде чем доверять числу из любого конвертера, включая этот.

Конвертация самого размера корня

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

Использование rem внутри компонента, задающего собственный размер шрифта

Rem всегда относится к корню, а не к компоненту. У кнопки с размером шрифта 14 px и отступом 1rem отступ не следует за собственным текстом кнопки. Если вам нужны отступы, следующие за текстом элемента, это работа em.

Смешивание единиц без плана

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

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

Сколько rem составляют 16 px?

Один, в браузере по умолчанию. Шестнадцать, делённые на базу шестнадцать.

Лучше ли rem, чем px?

Для шрифта и отступов — лучший выбор в большинстве проектов, потому что он уважает настройки читателя. Пиксели остаются верными для того, что не должно масштабироваться.

Почему мой результат отличается от другого сайта?

Вероятно, другая база. Проверьте поле: одни инструменты предполагают 10, другие 16, третьи 14. Эта страница показывает базу рядом с результатом.

Обязательно ли округлять?

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

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

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

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

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

Разумный выбор, когда вы конвертируете px в rem

Решите о базе для проекта и придерживайтесь её

Что бы вы ни выбрали, сделайте это решением и запишите в документации проекта. Команда, не согласная о базе, производит компоненты, которые не стыкуются.

Конвертируйте на этапе дизайна, а не в последний момент

Если вы конвертируете px в rem, читая макет, вы встраиваете шкалу в дизайн и замечаете странные значения рано. Если делаете это в конце, вы обнаруживаете их как груду несогласованных чисел.

Подумайте и об единицах области просмотра

Для заголовков, которые должны заполнять экран, px в vw выражает размер как долю области просмотра. Он масштабируется иначе, чем rem, и два часто сочетают.

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

Держите таблицу конвертации в голове

При базе 16 несколько опорных значений покрывают большую часть работы: 4 px — это 0,25 rem, 8 px — 0,5, 12 px — 0,75, 16 px — 1, 24 px — 1,5, а 32 px — 2. Когда макет даёт вам значение между ними, вы можете прикинуть, прежде чем конвертировать px в rem на странице, и использовать конвертер только для подтверждения. Через несколько недель вы будете знать таблицу, не глядя.

Пусть работу делает дизайн-система

Если ваша команда ведёт дизайн-токены, такие как spacing-2 или font-lg, сохраните их в rem один раз и пусть все ссылаются на названия. Тогда никому не нужно снова конвертировать px в rem, а изменение шкалы делается в одном месте. Конвертер — инструмент, которым вы пользуетесь, когда пишете токены, а не когда используете их.

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

Строка вроде padding: 1.25rem; /* 20px */ стоит нескольких символов и избавляет следующего разработчика от поисков калькулятора. Она также фиксирует, какую базу вы предполагали, что помогает, если размер корня потом изменят.

Проверьте с изменённой настройкой браузера

Доказательство того, что страница построена в rem, — она переживает более крупный размер текста по умолчанию. Измените настройку в браузере, перезагрузите и посмотрите. Ломаются те компоненты, где что-то оставили в пикселях или где фиксированная высота обрезала текст.

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

То же семейство инструментов охватывает соседние конвертации. Чтобы вернуться к пикселям, используйте rem в px. Для размеров относительно элемента есть px в em и em в px, а для размеров относительно экрана — px в vw и vw в px. Если ваша работа включает цвета наряду с размерами, HEX в RGB, RGB в HEX и HEX в HSL справляются с записями таблицы стилей.

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

Допустим, макет даёт заголовок карточки в 28 px, отступ карточки в 20 px и промежуток в 12 px между карточками, а ваш проект использует базу по умолчанию 16 px. Вы вводите 28 и читаете 1,75 rem, вводите 20 и читаете 1,25 rem, вводите 12 и читаете 0,75 rem. В таблице стилей вы пишете font-size: 1.75rem, padding: 1.25rem и gap: 0.75rem. Посетитель, повысивший размер текста в браузере до 20 px, видит ту же карточку, увеличенную на четверть: заголовок 35 px, отступ 25 px и промежуток 15 px, всё пропорционально. Если бы вы писали в пикселях, заголовок остался бы 28, а карточка выглядела бы неверно.

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

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

Узнайте, какую базу использует ваш CSS. Решите, какие размеры должны масштабироваться, а какие нет.

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

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

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

Проверьте страницу с более крупным размером текста по умолчанию в браузере и поищите блоки, которые больше не вмещают свой текст.

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

Предположение, что 1 rem всегда 16 px

Это так, только когда никто не менял размер корня, а некоторые читатели меняли. Пишите раскладку так, чтобы она работала и при других размерах.

Задание размера корня в пикселях

Это переопределяет выбор читателя. Используйте процент или не задавайте.

Конвертация всего подряд

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

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

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

Итог

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