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

Що таке Конвертер одиниць CSS?

Конвертер одиниць CSS — це безкоштовний браузерний інструмент, що перекладає одну довжину CSS у сім поширених одиниць: px, rem, em, pt, %, vw та vh. Фронтенд-розробники та вебдизайнери використовують його, щоб переводити макет між абсолютними пікселями й адаптивними одиницями, перевіряти, скільком пікселям відповідає rem за власного кореневого розміру шрифту, або перетворювати друкарське значення pt на екранні пікселі. Оскільки rem залежить від кореневого розміру шрифту, em і % залежать від розміру шрифту батьківського елемента, а vw/vh залежать від області перегляду, конвертер подає всі чотири параметри як настроювані налаштування. Уведіть значення, виберіть вихідну одиницю — і всі поля результатів оновляться одночасно. Готовий до вставлення фрагмент CSS перелічує всі сім еквівалентів як оголошення font-size.

Як користуватися Конвертер одиниць CSS

1. Відкрийте Налаштування та задайте кореневий розмір шрифту (font-size елемента html, на якому ґрунтується rem), розмір шрифту батьківського елемента (для em і %), а також ширину й висоту області перегляду (для vw і vh).
2. Уведіть число, яке хочете перетворити, у полі значення.
3. Виберіть вихідну одиницю з розкривного списку «З»: px, rem, em, pt, %, vw або vh.
4. Дивіться кожен еквівалент у підписаних полях результатів лише для читання; усі вони перераховуються автоматично, коли ви змінюєте значення, одиницю або будь-яке налаштування.
5. Скопіюйте згенерований фрагмент CSS, щоб вставити всі сім еквівалентів font-size прямо у свою таблицю стилів.

Приклади

Корінь 16px, значення 16, З px

rem = 1

Корінь 10px, значення 2, З rem

px = 20

значення 16, З px

pt = 12

Поширені запитання

Між якими одиницями він перетворює?

Сім одиниць довжини CSS: px, rem, em, pt, %, vw та vh. Будь-яка з них може бути вихідною, і всі сім еквівалентів відображаються одночасно.

Навіщо потрібно задавати кореневий розмір, розмір батьківського елемента та розміри області перегляду?

Ці одиниці відносні. rem — це кратне кореневого розміру шрифту (html), em і % залежать від розміру шрифту батьківського елемента, а vw/vh — це відсотки від ширини й висоти області перегляду. Задавши їх у Налаштуваннях, ви повідомляєте конвертеру, чому відповідає кожна відносна одиниця.

Як обробляється pt?

CSS визначає 96px = 1in = 72pt, тож 1pt дорівнює 4/3 px, а 1px дорівнює 0,75pt. Конвертер використовує це фіксоване співвідношення, незалежно від розміру шрифту чи області перегляду.

Що станеться, якщо значення або налаштування недійсне?

Якщо значення не є скінченним числом або якщо будь-який із розмірів кореня, батьківського елемента чи області перегляду відсутній, дорівнює нулю або відʼємний, поля результатів показують тире (—), доки ви не введете коректні числа.

Чи надсилається щось на сервер?

Ні. Усі перетворення виконуються повністю на стороні клієнта у вашому браузері, без вивантаження та без звернень до сервера, тож уведені вами значення ніколи не залишають ваш пристрій.