Конвертер одиниць CSS
Переведення px, rem, em, pt та інших одиниць верстки.
Заповніть поля, і результат автоматично зʼявиться тут.
Порівнює CSS-довжини через CSS-піксель із явно заданими базами rem та em. Сталі співвідношення: 1in=96px, 1pt=96/72px, 1pc=16px. rem використовує обчислений шрифт кореня. Для звичайних властивостей em використовує шрифт самого елемента, а у font-size — успадкований розмір. Поле «База em» задає потрібний контекст без припущення про вкладеність.
Як працює
Формула і логіка
Для кожної одиниці задано коефіцієнт f у CSS-пікселях. Результат = значення·fпоч/fціл. Для rem це кореневий розмір, для em — задана база em; 1cm=96/2,54px, 1mm=96/25,4px. Обидві бази мають бути додатними, бо потрібні й для довідкових рядків. Нульові та від’ємні довжини арифметично дозволені, хоча конкретна CSS-властивість може їх забороняти.
Приклад
За кореневого розміру 16 px значення 24 px — це 1,5 rem і 18 pt.
Поля й одиниці
- Значення — px
- З одиниці — варіант зі списку
- В одиницю — варіант зі списку
- Кореневий розмір шрифту — px
- База em — px
Як користуватися
- — Оберіть початкову та цільову одиниці й введіть довжину.
- — Задайте обчислений кореневий шрифт і базу em у CSS-пікселях.
- — Цільова одиниця вказана в підписі результату; довідкові рядки використовують ті самі бази.
Методика та обмеження
- Методика розрахунку
- Формула і логіка
- Джерело даних або норми
- W3C CSS Values 3: бази em/rem та абсолютні одиниці (проєкт)
- Обмеження
- Переведення CSS-довжин із заданим контекстом; не вимірює щільність екрана й не перевіряє допустимість довжини для конкретної властивості.
FAQ
Чим відрізняються бази rem та em?
rem використовує обчислений шрифт кореня. Для margin або width em стосується шрифту самого елемента, а для font-size — успадкованого розміру. Введіть базу саме потрібної властивості.
CSS-сантиметр збігається з фізичним?
Співвідношення cm і px стале: 1cm=96/2,54px. Фізичний розмір залежить від прив’язки абсолютних одиниць на пристрої; збіг із лінійкою на екрані не гарантований.
px вимикає масштабування браузера?
Ні. Масштабування сторінки працює і з px. rem може враховувати користувацький кореневий шрифт; доступність слід перевіряти на реальному макеті, а не за однією одиницею.
Чи завжди 62,5% дає корінь 10px?
Лише за початкового розміру 16px: 0,625·16=10. За користувацького шрифту 20px вийде 12,5px. Тут вводиться фактично обчислений розмір.