Unități CSS
Introdu o valoare și alege unitatea ca să vezi aceeași dimensiune în toate unitățile CSS, gata de copiat.
Aceeași dimensiune în alte unități
- 1.5remdimensiunea fontului rădăcină
- 1.5emdimensiunea fontului părinte
- 150%procent din dimensiunea fontului părinte
- 18ptpuncte
- 1.5pcpica
- 0.25ininchi
- 0.635cmcentimetri
- 6.35mmmilimetri
- 25.4Qsferturi de milimetru
- 1.6667vwprocent din lățimea viewportului
- 2.6667vhprocent din înălțimea viewportului
- 2.6667vminprocent din latura mai scurtă a viewportului
- 1.6667vmaxprocent din latura mai lungă a viewportului
Context
Px în rem la 16 px
| px | rem | pt |
|---|---|---|
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 64px | 4rem | 48pt |
Un punct înseamnă 1,333 px, deoarece un inch are 96 px și 72 pt. Invers, un pixel are 0,75 pt.
Cum funcționează
Rem pornește de la dimensiunea fontului elementului html, care este de 16 px în toate browserele dacă nu o schimbă nimeni. Așadar, 24 px înseamnă 1,5 rem. Dacă setezi html { font-size: 62.5% }, obții 10 px pe rem și calcule mai ușoare în minte, dar schimbi totodată tot ce se bazează pe dimensiunea implicită.
Em pornește de la dimensiunea fontului elementului părinte și de aceea se cumulează când elementele sunt imbricate: 1,2 em în interiorul lui 1,2 em este de 1,44 ori mai mare. Procentele la font-size funcționează la fel, 100 % fiind egal cu 1 em. Procentele la lățimi sau margini pornesc în schimb de la blocul care conține elementul și nu sunt convertite aici.
Rem este alegerea obișnuită pentru dimensiunile fonturilor și spațieri, pentru că astfel pagina urmează dimensiunea aleasă de vizitator în browser. Px la dimensiunile fonturilor nu împiedică zoomul, dar ignoră această setare, aspect tratat în ghidurile WCAG despre redimensionarea textului.
Vw și vh reprezintă un procent din lățimea și înălțimea viewportului, iar vmin și vmax un procent din latura lui mai scurtă, respectiv mai lungă. Valorile depind în întregime de fereastră, așa că butonul preia dimensiunea ferestrei pe care o folosești acum. Pe telefoane, vh se poate schimba când apare bara de adrese; dvh, svh și lvh rezolvă asta.
Pt, pc, in, cm, mm și Q sunt unități absolute cu raporturi fixe în CSS: un inch are 96 px, 72 pt și 2,54 cm. Pe ecran, asta înseamnă rareori centimetri reali, pentru că un pixel CSS nu este un pixel fizic. Sunt cele mai utile în foile de stil pentru tipărire.
Valorile se scriu cu punct zecimal și cel mult patru zecimale, așa cum cere CSS.