Разгледайте всяка 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; единици за container query като cqw и cqi; единицата fr за grid; плюс единици за ъгъл, време, резолюция и проценти.

Всяка карта дава повече от определение: токенът на единицата с копируем моноширинен шрифт, пълното ѝ име, категорията ѝ, обикновено описание как се изчислява и практична бележка „кога да се използва“, която казва къде единицата заслужава мястото си — и къде друга служи по-добре.

Търсенето съвпада с токени, имена и значения, така че rem, viewport width и root всички намират своите единици, а чипове за тип филтрират мрежата до едно семейство. Всичко работи в браузъра ви от вграден справочник, без нищо да се изпраща към сървър.

Как да използвате Справочник за CSS единици

  1. Потърсете единица по токен, име или значение — например rem, viewport width или angle.
  2. Използвайте чиповете за тип, за да филтрирате мрежата до абсолютни, относителни на шрифта, viewport, container, grid, ъглови, времеви, резолюционни или процентни единици.
  3. Прочетете описанието на всяка единица и бележката „кога да се използва“, за да изберете правилната.
  4. Кликнете бутона за копиране, за да вземете токена на единицата за стиловия си лист.

Често задавани въпроси

Използвайте rem за размери на шрифт и всичко, което трябва да се мащабира с предпочитания размер на текста на потребителя — rem проследява размера на шрифта на корена, така че настройките за достъпност на браузъра работят. Използвайте px за неща, които трябва да остават оптически постоянни, като тънки рамки.

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

Мобилните браузъри показват и скриват лентите си с инструменти, променяйки видимата височина, докато vh остава фиксирана към по-големия размер на оформлението. Динамичната единица dvh проследява реалната видима височина, докато лентите се движат, а svh/lvh се фиксират към най-малкото и най-голямото състояние.

fr разпределя свободното пространство на grid контейнер по дроб: grid-template-columns: 2fr 1fr дава на първата колона двойно повече от оставащата ширина на втората, след като фиксираните писти и разстоянията са извадени. Съществува само вътре в дефиниции на grid писти.

Те оразмеряват елементи спрямо най-близкия им query контейнер, а не viewport-а: cqw е 1% от ширината на контейнера, cqi — 1% от inline размера му. Те позволяват на компонент да се мащабира спрямо кутията, в която живее, независимо от размера на екрана.

Да. Всичките 45 единици са документирани безплатно в страница, която работи изцяло в браузъра ви — без регистрация, без заявки към сървъра.

Сподели
Нуждаете се от помощ?
Открихте проблем с този инструмент? Кажете ни.
Докладване на проблем

Добавете този безплатен инструмент към собствения си уебсайт — копирайте и поставете кода по-долу.