Просмотрите все единицы 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 единиц бесплатно задокументированы на странице, которая полностью работает в вашем браузере — без регистрации, без запросов к серверу.

Поделиться
Нужна помощь?
Возникла проблема с этим инструментом? Сообщите нам.
Сообщить о проблеме

Добавьте этот бесплатный инструмент на свой сайт — скопируйте и вставьте код ниже.