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

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

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

Перетворення між пікселями та пунктами використовує співвідношення CSS, за яким один пункт дорівнює одному та одній третині пікселя, тобто один піксель — це 0,75 пункта. Одночасний показ усіх еквівалентів полегшує перевірку, чи токен відступу або розміру шрифту узгоджується з рештою шкали. Кнопка копіювання створює компактний багаторядковий підсумок для нотаток, pull request або рев’ю токенів.

Приватна робота в браузері

Уся обробка відбувається у вашому браузері за допомогою клієнтського JavaScript. Інструмент не завантажує на сервер фрагменти коду, значення конфігурацій, згенеровані дані, тексти запитів чи скопійовані приклади й не потребує облікового запису. Така суто локальна модель важлива для інструментів розробника, адже вставлений вміст часто нагадує справжні дані застосунку: відповіді API, журнали, зразки, схожі на змінні середовища, запити до баз даних, розмітку з чернеток чи значення, скопійовані під час налагодження в робочому середовищі. Локальна обробка зменшує ризик і робить роботу швидкою, бо немає жодних мережевих запитів.

Інтерфейс навмисно компактний: ви вставляєте вхідні дані, змінюєте параметри, переглядаєте результат, копіюєте його й повертаєтеся до редактора. Результати все одно варто перевіряти, перш ніж комітити їх, оприлюднювати чи використовувати в робочому процесі. Браузерні інструменти чудово підходять для швидкого огляду та підготовки, але не знають усіх конвенцій проєкту, правил класифікації даних чи вимог до валідації, специфічних для застосунку.

Практичні поради

Використовуйте rem для значень, які мають слідувати за коренем документа, наприклад доступні розміри шрифту та відступи макета, пов’язані з налаштуваннями користувача. Використовуйте em, коли значення має масштабуватися разом із розміром шрифту самого компонента, скажімо, для вирівнювання іконок, локальних внутрішніх відступів чи вкладеної типографіки. Обережно застосовуйте px для точних рамок, растрових ресурсів і випадків, коли відносне масштабування небажане. Фактичні обчислені розміри можуть залежати від налаштувань браузера, успадкування, масштабу, медіазапитів і стилів конкретного контейнера, тож важливі значення перевіряйте в інструментах розробника.