Перейти до вмісту
TextArray
100% локально

Конвертер одиниць CSS

Перетворюйте довжини CSS між px, rem, em, pt і % на будь-який розмір кореневого шрифту.

Введення
Вихід

Конвертер одиниць CSS

Вставте значення CSS по одному на рядок — 16 пікселів, 1,5 rem, 12 pt, 150 % — і цей конвертер миттєво їх перекладає. Голе число зчитується в одиниці, встановленій за допомогою вибору From, тоді як одиниця, написана в рядку, завжди виграє, тому ви можете змішувати пікселі та rems в одному списку. Виберіть ціль у розділі «До» або виберіть «Усі одиниці», щоб одразу побачити весь ланцюжок: 16px = 1rem = 12pt = 100%. Рядки, які не є звичайними значеннями, проходять без змін, тому випадковий коментар ніколи не порушує пробіг.

Математика залежить від одного числа: базового розміру, кореневого розміру шрифту в пікселях. Браузери за замовчуванням мають розмір 16 пікселів, тому 1 rem зазвичай дорівнює 16 пікселям, а 100% дорівнює базі. Встановіть базове значення 10 для класичного трюку 62,5%, де 1,5 rem дорівнює 15 пікселям, або підберіть систему дизайну з іншим коренем. Точки фіксуються самим CSS — 1 пікс дорівнює 1/96 дюйма, а 1 пт — 1/72, тому 16 пікселів — це рівно 12 пт, незалежно від основи. Опція десяткових знаків обмежує точність до шести знаків із обрізанням кінцевих нулів.

Rem є зручною для спеціальних можливостей одиницею: вона масштабується відповідно до параметрів розміру шрифту браузера читача, тому текст, встановлений у rem, збільшується, коли хтось збільшує розмір за замовчуванням, тоді як px залишається фіксованим. Em використовує ту саму математику тут, але в реальній таблиці стилів вона є відносною до власного розміру шрифту елемента, тому вкладені значення em складаються, а rem ні — цей конвертер передбачає плоский, відносний регістр.

Усе працює локально у вашому браузері — нічого не завантажується і немає чого чекати. Скопіюйте перетворений список або завантажте його як файл .txt.

FAQ

Навіщо використовувати rem замість px?
Значення Rem масштабуються відповідно до розміру шрифту, який читач встановлює у своєму браузері, тому люди, яким потрібен більший текст, дійсно його отримають. Значення Px ігнорують це налаштування. Перетворення дизайну на основі px у rem є одним із найдешевших виграшів у доступності.
Що таке базовий розмір і чому за умовчанням він 16?
Це розмір основного шрифту в пікселях — те, до чого відносяться 1rem, 1em і 100%. Every major browser ships with a 16px default, so 16 is the right base unless your stylesheet changes the root, for example html { font-size: 62.5% } which makes the base 10.
Яка різниця між em і rem?
Rem завжди відносно розміру кореневого шрифту; em відносно поточного елемента, тому вкладені значення em множаться. Цей конвертер обробляє обидва з єдиним базовим розміром — плоским корпусом. У глибоко вкладеній розмітці реальні значення em можуть відрізнятися.
Що відбувається з рядками, які не є значеннями?
Вони проходять на вихід без змін, і підрахунок вважає їх пропущеними. Перетворюються лише прості значення, як-от 16 пікселів, 1,5 rem або чисте число — повні декларації CSS виходять за рамки.
Мій текст десь завантажено?
Ні. Інструмент повністю працює у вашому браузері, і введені дані ніколи не залишають ваш пристрій.