Conversia unităților CSS este procesul de transformare între diverse unități de lungime (px, em, rem, %, vw, vh etc.) folosite în design web.
Unități absolute și relative
Unitățile CSS se împart în unități absolute și relative. Unitățile absolute (px, pt, cm etc.) au dimensiuni fixe, în timp ce unitățile relative (em, rem, %, vw, vh etc.) se exprimă ca raport la o valoare de bază.
px (Pixel)
Cea mai comună unitate, reprezentând un punct pe ecran. Ușor de utilizat datorită dimensiunii fixe, dar are provocări de accesibilitate deoarece ignoră setările de font ale utilizatorului.
em (Em)
Unitate relativă bazată pe dimensiunea fontului elementului părinte. 1em = font-size al părintelui. Calculată cumulativ în structuri înglobate, ceea ce poate conduce la dimensiuni neașteptate.
rem (Root Em)
Unitate relativă bazată pe dimensiunea fontului elementului root (html). 1rem = html font-size (de obicei 16px). Spre deosebire de em, nu este afectată de înglobare și este recomandată în CSS modern.
% (Procent)
Reprezintă o proporție față de dimensiunea elementului părinte. Pentru font-size se bazează pe părinte; pentru width pe lățimea părintelui. Referința variază în funcție de proprietate.
vw/vh (Unități viewport)
Unități bazate pe dimensiunea viewportului. 1vw = 1% din lățimea viewportului, 1vh = 1% din înălțimea viewportului. Permit layout-uri flexibile care răspund la dimensiunea ecranului.
pt/pc (Unități pentru print)
Unități folosite în industria tiparului. 1pt = 1/72 inch, 1pc = 12pt. Folosite în CSS pentru print și generare PDF; pentru ecran se preferă px sau rem.
Unități fizice (cm/mm/in)
Unități care reprezintă o lungime fizică reală. 1in = 2.54cm = 25.4mm = 96px (definiție CSS). Utile când este necesară coerența cu materialele tipărite, dar dimensiunea fizică a ecranului nu este garantată.
Avantajele conversiei în timp real
Acest instrument suportă conversie în timp real și actualizează imediat rezultatele când valorile de bază se schimbă. Permite verificarea rapidă a aspectului pe diferite dimensiuni de ecran și setări de font.