Довідник одиниць CSS

Всі інструменти Безкоштовно

Переглядайте всі одиниці CSS — абсолютні (px, cm, pt), відносні до шрифту (em, rem, ch), порту перегляду (vw, dvh), контейнерних запитів, сітки (fr), кута, часу та роздільної здатності — у довіднику з пошуком і фільтром за типом, з описом, поясненням «коли використовувати» та готовими до копіювання токенами. У браузері, безкоштовно.

Кожна одиниця CSS з поясненням. Усе виконується у вашому браузері з вбудованого довідника — нічого не надсилається на сервер.

Жодна одиниця не відповідає вашому пошуку.
Спробуйте іншу одиницю чи категорію — наприклад, rem, dvh, fr або кут.

Про Довідник одиниць CSS

Довідник одиниць CSS документує кожну одиницю, яку пропонує мова, — 45 загалом — організовану за типом: абсолютні одиниці, як-от px, cm і pt; відносні до шрифту одиниці, як-от em, rem, ch і lh; одиниці viewport від vw і vh до новіших svh, lvh і dvh; одиниці контейнерних запитів, як-от cqw і cqi; одиницю сітки fr; а також кут, час, роздільність і відсоток.

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

Пошук збігається з токенами, назвами й значеннями, тож rem, viewport width і root — усі знаходять свої одиниці, а мітки типу фільтрують сітку до однієї родини. Усе працює у вашому браузері на основі вбудованого довідника, і нічого не надсилається на сервер.

Як використовувати Довідник одиниць CSS

  1. Знайдіть одиницю за токеном, назвою чи значенням — наприклад rem, viewport width або angle.
  2. Використовуйте мітки типу, щоб фільтрувати сітку до абсолютних, відносних до шрифту, viewport, контейнерних, сіткових, кутових, часових одиниць, роздільності чи відсотка.
  3. Прочитайте опис кожної одиниці та примітку "коли використовувати", щоб обрати правильну.
  4. Натисніть кнопку копіювання, щоб отримати токен одиниці для вашої таблиці стилів.

Часті запитання

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

em відносний до розміру шрифту поточного елемента, тож вкладені елементи накопичують значення; rem завжди відносний до кореневого елемента, даючи передбачувані результати. Саме тому rem став вибором за замовчуванням для відступів і масштабів типографіки.

Мобільні браузери показують і ховають свої панелі інструментів, змінюючи видиму висоту, тоді як vh залишається фіксованим до більшого розміру макета. Динамічна одиниця dvh відстежує фактичну видиму висоту в міру руху панелей інструментів, а svh/lvh прив’язані до найменшого й найбільшого станів.

fr розподіляє вільний простір контейнера сітки за часткою: grid-template-columns: 2fr 1fr дає першому стовпцю вдвічі більше залишкової ширини, ніж другому, після віднімання фіксованих доріжок і проміжків. Вона існує лише всередині визначень доріжок сітки.

Вони розмірюють елементи відносно найближчого контейнера запиту, а не вікна перегляду: cqw — 1% ширини контейнера, cqi — 1% його вбудованого розміру. Вони дозволяють компоненту масштабуватися відповідно до блока, в якому він живе, незалежно від розміру екрана.

Так. Усі 45 одиниць безкоштовно задокументовані на сторінці, що повністю працює у вашому браузері — без реєстрації, без запитів до сервера.
Поділитися
Пов'язані інструменти
Коди стану HTTP Шукайте будь-який код стану відповіді HTTP (1xx–5xx) у каталозі з пошуком та фільтрами — потім відкрийте будь-який код, щоб дізнатися, що він означає, коли його використовувати, чи кешується він і який RFC його визначає. У браузері, безкоштовно. Безкоштовно
Методи HTTP Зручний для перегляду довідник усіх методів запитів HTTP — GET, POST, PUT, PATCH, DELETE та інші, плюс WebDAV — який з першого погляду показує, чи є кожен із них безпечним, ідемпотентним та кешованим, чи приймає тіло, а також типовий приклад. У браузері, безкоштовно. Безкоштовно
Довідник заголовків HTTP Шукайте поширені заголовки запитів і відповідей HTTP у каталозі з пошуком — фільтруйте за напрямком і категорією, читайте однорядковий опис та реалістичний приклад і копіюйте будь-яку назву заголовка одним клацанням. У браузері, безкоштовно. Безкоштовно
Типи DNS-записів Переглядайте всі поширені типи DNS-записів — A, AAAA, CNAME, MX, TXT, NS, SOA, PTR, SRV, CAA, DNSKEY, DS, TLSA та інші — з їхнім призначенням, прикладом для зонного файлу, який можна скопіювати, та категорією. Пошук і фільтрація миттєво, у браузері, безкоштовно. Безкоштовно
Номери TCP/UDP-портів Шукайте загальновідомі та широко використовувані мережеві порти в таблиці з пошуком — FTP, SSH, HTTP, HTTPS, MySQL, Postgres, RDP, Redis, MongoDB та ще 120+, кожен зі своїм транспортним протоколом, службою, описом і категорією. Шукайте за номером порту чи назвою служби та миттєво копіюйте значення. У браузері, безкоштовно. Безкоштовно
Калькулятор підмереж / CIDR Обчислюйте підмережі IPv4 за CIDR або маскою: мережа, широкомовна адреса, діапазон вузлів, зворотна маска тощо. Безкоштовно
Потрібна допомога?
Виникла проблема з цим інструментом? Повідомте нас.
Повідомити про проблему

Додайте цей безкоштовний інструмент на власний вебсайт — скопіюйте та вставте код нижче.