Răsfoiește fiecare unitate CSS — absolute (px, cm, pt), relative la font (em, rem, ch), viewport (vw, dvh), interogări de container, grilă (fr), unghi, timp și rezoluție — într-o referință cu căutare și filtrare după tip, cu o descriere, o notă „când să o folosești” și token-uri gata de copiat. În browserul tău, gratuit.

Fiecare unitate CSS, explicată. Totul rulează în browserul tău dintr-o referință încorporată — nimic nu este trimis către server.

Nicio unitate nu corespunde căutării tale.
Încearcă o altă unitate sau categorie — de exemplu rem, dvh, fr sau unghi.

Despre Referință unități CSS

Referința de unități CSS documentează fiecare unitate oferită de limbaj — 45 în total — organizate după tip: unități absolute precum px, cm și pt; unități relative la font precum em, rem, ch și lh; unități de viewport, de la vw și vh, până la mai noile svh, lvh și dvh; unități de container query precum cqw și cqi; unitatea de grilă fr; plus unghi, timp, rezoluție și procentaj.

Fiecare card oferă mai mult decât o definiție: token-ul unității în format monospațiat copiabil, numele complet, categoria, o descriere clară a modului în care este calculată și o notă practică „când să o folosești”, care spune unde își câștigă unitatea locul — și unde una diferită servește mai bine.

Căutarea corespunde token-urilor, numelor și semnificațiilor, deci rem, viewport width și root duc toate la unitățile respective, iar etichetele de tip filtrează grila la o singură familie. Totul rulează în browserul tău dintr-o referință integrată, fără nimic trimis către un server.

Cum să utilizați Referință unități CSS

  1. Caută o unitate după token, nume sau semnificație — de exemplu rem, viewport width sau angle.
  2. Folosește etichetele de tip pentru a filtra grila la unități absolute, relative la font, de viewport, de container, de grilă, de unghi, de timp, de rezoluție sau de procentaj.
  3. Citește descrierea fiecărei unități și nota „când să o folosești” pentru a o alege pe cea potrivită.
  4. Apasă butonul de copiere pentru a prelua token-ul unității pentru foaia ta de stil.

Întrebări frecvente

Folosește rem pentru dimensiuni de font și orice ar trebui să se scaleze cu dimensiunea preferată de text a utilizatorului — rem urmărește dimensiunea fontului rădăcină, deci setările de accesibilitate ale browserului funcționează. Folosește px pentru lucruri care trebuie să rămână optic constante, precum bordurile fine.

em este relativ la dimensiunea fontului elementului curent, deci elementele imbricate compun valoarea; rem este întotdeauna relativ la elementul rădăcină, oferind rezultate previzibile. De aceea rem a devenit alegerea implicită pentru spațiere și scări de tip.

Browserele mobile afișează și ascund barele de instrumente, schimbând înălțimea vizibilă, în timp ce vh rămâne fixat la dimensiunea mai mare a layout-ului. Unitatea dinamică dvh urmărește înălțimea vizibilă reală pe măsură ce barele de instrumente se mișcă, iar svh/lvh se fixează la stările cea mai mică și cea mai mare.

fr distribuie spațiul liber al unui container de grilă pe fracțiuni: grid-template-columns: 2fr 1fr oferă primei coloane de două ori lățimea rămasă a celei de-a doua, după ce se scad pistele fixe și spațiile dintre ele. Există doar în definițiile pistelor de grilă.

Dimensionează elementele relativ la cel mai apropiat container de interogare, nu la viewport: cqw este 1% din lățimea containerului, cqi este 1% din dimensiunea sa inline. Îi permit unei componente să se scaleze la cutia în care se află, independent de dimensiunea ecranului.

Da. Toate cele 45 de unități sunt documentate gratuit într-o pagină care rulează integral în browserul tău — fără înregistrare, fără cereri către server.

Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.