Конвертер CSS-единиц (px ↔ rem ↔ em ↔ pt)

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

Возможности

Настройка базового размера шрифта
px ↔ rem ↔ em ↔ pt
Готовый фрагмент CSS

Как использовать

1. Укажите базовый размер шрифта (по умолчанию 16px).

2. Введите значение в любое поле единицы измерения.

3. Все остальные единицы обновятся автоматически.

Об этом инструменте

С пикселями легко работать, но единицы rem масштабируются вместе с размером шрифта, выбранным пользователем, а это важно для доступности. Этот конвертер синхронизирует px, rem, em и pt на основе выбранного вами корневого размера шрифта — по умолчанию 16px, стандарт браузеров. Введите значение в любое поле, и остальные обновятся: так можно перевести в rem макет, сданный в пикселях, или узнать, чему на экране соответствует печатный размер 12pt. Расчёт предполагает, что em отсчитывается от того же базового размера, что и rem; это верно для элементов, родитель которых использует корневой размер шрифта, а у вложенных компонентов со своим размером шрифта значения будут другими.

Часто задаваемые вопросы

Чем отличаются rem и em?
rem отсчитывается от размера шрифта корневого элемента, поэтому 1rem одинаков на всей странице. em отсчитывается от размера шрифта родителя текущего элемента, поэтому во вложенных элементах значения перемножаются. Этот конвертер считает em относительно введённого корневого размера.
Почему для размеров шрифта лучше rem, а не px?
Если посетитель увеличит размер шрифта по умолчанию в настройках браузера, текст в rem вырастет вместе с ним, а текст в px эту настройку проигнорирует. rem для шрифтов и отступов делает сайт удобнее для людей со слабым зрением.
Как пункты переводятся в пиксели?
CSS определяет 1 дюйм как 96px и 72pt, поэтому 1pt равен 4/3 px (около 1,333px). Шрифт 12pt, таким образом, равен 16px.
Стоит ли задавать корневой размер шрифта 62.5%?
html { font-size: 62.5% } делает 1rem равным 10px, что упрощает расчёты, но уменьшает текст по умолчанию и требует компенсации повсюду. Многие команды сейчас оставляют стандартные 16px и пользуются конвертером вроде этого.
Равен ли 1px в CSS одному физическому пикселю экрана?
На экранах с высокой плотностью — нет. CSS-пиксель — это эталонная единица; на устройстве с плотностью пикселей 2 один CSS-пиксель рисуется двумя физическими пикселями по каждой оси.

Похожие инструменты