Unități CSSExplained

38 of 38 rows

Unitate↕	Relativ la↕	Când să o folosești↕	Exemplu↕
Absolute
⤢px	1/96 din inch (pixelul de referință CSS).	Dimensiuni fixe de UI: borduri, linii fine, dimensiuni de iconuri.	border: 1px solid #000;
⤢pt	1/72 din inch (1pt = 1.333px).	Foile de stil pentru print, unde dimensiunile corespund hârtiei fizice.	font-size: 12pt;
⤢cm	1 centimetru (≈37.8px).	Layouturi de print care au nevoie de măsurători reale.	margin: 2cm;
⤢mm	1 milimetru (≈3.78px).	Măsurători fine pentru print.	padding: 5mm;
⤢in	1 inch (96px = 2.54cm).	Layouturi de print dimensionate în inchi.	margin: 1in;
Relative la font
⤢em	Propria dimensiune a fontului elementului (moștenită de la părinte).	Spațiere care se scalează împreună cu textul din jur.	padding: 1em;
⤢rem	Dimensiunea fontului elementului rădăcină (elementul html).	Dimensiuni de font: respectă setarea utilizatorului pentru dimensiunea fontului rădăcină.	font-size: 1.25rem;
⤢ch	Lățimea de avans a glifului '0' din fontul curent.	Stabilește o lungime de rând lizibilă (caractere pe rând).	max-width: 70ch;
⤢ex	Înălțimea x a fontului curent (înălțimea literei mici 'x').	Metrice verticale legate de fontul folosit.	line-height: 2ex;
⤢cap	Înălțimea majuscelor fontului curent (înălțimea unei litere mari).	Metrice verticale dimensionate pe majuscule, mai strânse decât ex.	padding-top: 0.5cap;
⤢ic	Lățimea de avans a ideogramei '水' (apă) din fontul curent.	Dimensionare care urmărește o celulă de caracter CJK.	width: 4ic;
⤢lh	Propria înălțime de rând calculată a elementului.	Dimensionează elemente în rânduri întregi de text.	height: 3lh;
⤢rlh	Înălțimea de rând a elementului rădăcină.	Spațiere în multipli de înălțimea de rând de bază a documentului.	margin-block: 2rlh;
Relative la viewport
⤢%	Valoarea aceleiași proprietăți a părintelui.	Layouturi fluide dimensionate după elementul care le conține.	width: 50%;
⤢vw	1% din lățimea viewportului.	Secțiuni full-bleed dimensionate după lățimea ecranului.	width: 100vw;
⤢vh	1% din înălțimea viewportului.	Secțiuni hero sau overlay-uri care acoperă înălțimea ecranului.	height: 100vh;
⤢vmin	1% din dimensiunea mai mică a viewportului.	Dimensionează elementele să încapă pe ecran în orice orientare.	font-size: 5vmin;
⤢vmax	1% din dimensiunea mai mare a viewportului.	Umple axa dominantă a viewportului.	font-size: 5vmax;
⤢svh	1% din înălțimea mică a viewportului (interfața browserului complet vizibilă).	Secțiuni mobile pe toată înălțimea, care încap deasupra interfeței extinse a browserului.	height: 100svh;
⤢lvh	1% din înălțimea mare a viewportului (interfața browserului ascunsă).	Fundaluri care trebuie să acopere ecranul chiar și când interfața browserului se restrânge.	height: 100lvh;
⤢dvh	1% din înălțimea dinamică a viewportului, urmărind interfața browserului când apare și dispare.	Soluția mobilă pentru 100vh: înălțimea se redimensionează când apare interfața browserului.	height: 100dvh;
⤢svw	1% din lățimea mică a viewportului.	Corespondentul pe lățime al svh pentru starea cea mai îngustă a viewportului.	width: 100svw;
⤢lvw	1% din lățimea mare a viewportului.	Corespondentul pe lățime al lvh pentru starea cea mai largă a viewportului.	width: 100lvw;
⤢dvw	1% din lățimea dinamică a viewportului, urmărind interfața browserului.	Corespondentul pe lățime al dvh când viewportul se redimensionează odată cu interfața.	width: 100dvw;
⤢vi	1% din dimensiunea viewportului de-a lungul axei inline (lățime în modurile de scriere orizontale).	Dimensionare după viewport care urmează direcția de scriere.	width: 50vi;
⤢vb	1% din dimensiunea viewportului de-a lungul axei de bloc (înălțime în modurile de scriere orizontale).	Dimensionare după viewport care rămâne corectă în modurile de scriere verticale.	height: 50vb;
Fluide
⤢clamp()	O valoare preferată limitată de un minim și un maxim.	Tipografie fluidă care nu depășește niciodată o limită minimă sau maximă.	width: clamp(320px, 80vw, 1100px);
⤢min()	Cea mai mică dintre argumentele separate prin virgule.	Limitează o dimensiune ca să nu depășească niciodată un maxim.	width: min(100%, 600px);
⤢max()	Cea mai mare dintre argumentele separate prin virgule.	Impune o dimensiune minimă care crește odată cu viewportul.	width: max(50%, 300px);
Unghi
⤢deg	1/360 dintr-un cerc complet.	Transformări de rotație și poziții unghiulare în gradiente.	transform: rotate(45deg);
⤢rad	Radiani; 1rad ≈ 57.2958deg.	Unghiuri calculate matematic, precum transformările generate.	transform: rotate(1.5708rad);
⤢grad	Gradiani; 400grad = un cerc complet.	Valori unghiulare vechi sau de tip topografic.	transform: rotate(100grad);
⤢turn	1turn = un cerc complet de 360°.	Rotații complete sau de jumătate de cerc, lizibile dintr-o privire.	transform: rotate(0.5turn);
Timp
⤢s	O secundă.	Durate de animație și de tranziție.	transition: opacity 0.3s;
⤢ms	O milisecundă (1s = 1000ms).	Animații scurte de feedback UI și întârzieri.	animation-duration: 150ms;
Rezoluție
⤢dpi	Puncte per inch la ieșire.	Media queries de rezoluție destinate printului.	@media (min-resolution: 300dpi)
⤢dppx / x	Puncte per unitate px; 1dppx echivalează cu un ecran standard de 96dpi.	Media queries Retina și pentru DPI mare.	@media (min-resolution: 2x)
⤢dpcm	Puncte pe centimetru (1dppx ≈ 2.54dpcm).	Media queries de rezoluție în unități metrice.	@media (min-resolution: 118dpcm)