Конвертер Одиниць CSS — Безкоштовно онлайн

Конвертуйте між одиницями CSS - px, rem, em, pt та відсотком - із налаштовуваним базовим розміром.

кореневий розмір у px
—

Результати надаються виключно в інформаційних цілях і можуть містити помилки. Перевіряйте важливу інформацію самостійно. Використання цього інструмента здійснюється на ваш власний ризик.

Що робить цей інструмент

Конвертер одиниць 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.

Цей інструмент безкоштовний?

Так, він безкоштовний. Без реєстрації та електронної пошти. Результат на цій сторінці.

Як отримати результат?

Скористайтеся інструментом на цій сторінці. Результат з’явиться тут, без надсилання електронною поштою.