Результаты предоставляются исключительно в информационных целях и могут содержать ошибки. Проверяйте важную информацию самостоятельно. Использование этого инструмента осуществляется на ваш страх и риск.
Что делает этот инструмент
Конвертер единиц CSS переводит длину между px, rem, em, pt и %. Введите значение, выберите его единицу и задайте базовый размер шрифта (по умолчанию 16px — именно его используют браузеры, если пользователь не изменил настройки), и страница покажет ту же длину во всех пяти единицах.
Пересчёт выполняется по спецификации CSS: 1rem равен размеру шрифта корневого элемента, поэтому при базе 16px 1.5rem — это 24px. Пункт равен 1/72 дюйма, а CSS-пиксель — 1/96, поэтому 12pt — это 16px. Здесь em и % вычисляются относительно той же базы, что соответствует размеру шрифта, заданному для элемента, родитель которого использует корневой размер. Данные не покидают ваш браузер.
Когда использовать
- Нужно перевести пиксельные значения из макета в
rem, чтобы текст масштабировался вместе с настройками шрифта пользователя. - Нужно конвертировать стили для печати или дизайн PDF, размеры в котором заданы в пунктах.
- Вы унаследовали чужой CSS и хотите понять, во что превращается размер шрифта в
%. - Вы строите типографическую шкалу, где каждому шагу нужно аккуратное значение в
rem.
Пример
Ввод
24px, база 16pxВывод
px 24.000
rem 1.5000
em 1.5000
pt 18.000
% 150.00%Вопросы об этом инструменте
Что использовать для размеров шрифта — rem или px?
Используйте rem для размеров шрифта и большинства отступов. Когда пользователь увеличивает размер шрифта по умолчанию в браузере для удобства чтения, значения в rem растут вместе с ним, а значения в px остаются неизменными.
Чем rem отличается от em?
rem всегда отсчитывается от размера шрифта корневого элемента (html). em отсчитывается от размера шрифта текущего элемента, поэтому во вложенных элементах значения перемножаются: 1.2em внутри 1.2em дают 1,44 от базы. Конвертер считает обе единицы относительно введённой вами базы.
Почему 1pt не равен 1px?
В CSS дюйм зафиксирован как 96 пикселей, а пункт равен 1/72 дюйма, поэтому 1pt — это 1,333px. Следовательно, текст кеглем 12 пунктов в текстовом редакторе такого же размера, как 16px в вебе.
Какой базовый размер вводить?
Вводите 16, если только ваша таблица стилей не задаёт другой корневой размер, например html { font-size: 62.5%; }, при котором база становится 10px. Введите то значение, которое в итоге получает элемент html.
Этот инструмент бесплатный?
Да, он бесплатный. Без регистрации и электронной почты. Результат на этой странице.
Как получить результат?
Используйте инструмент на этой странице. Результат появится здесь, без отправки по электронной почте.