Convertor de unități CSS

Convertor de unități CSS - calculator px, rem, em, %

🎨 Convertește între unități CSS: pixeli (px), rem, em, procente (%), puncte (pt) și unități viewport (vw, vh). Instrument esențial pentru design și dezvoltare web responsive.

Tipuri de unități CSS

• Unități absolute: px, pt, cm, mm, in - mărime fixă indiferent de context
• Unități relative: rem, em, %, vw, vh - se scalează în funcție de părinte sau viewport
• Relative la font: rem, em, ch, ex - bazate pe mărimea fontului
• Relative la viewport: vw, vh, vmin, vmax - bazate pe dimensiunile viewportului

Explicații

• px (pixeli): 1px = 1 pixel al dispozitivului. Precis, dar nu se scalează.
• rem: Relativ la elementul root (html). 1rem = 16px implicit.
• em: Relativ la fontul părintelui. Poate “compune” în elemente imbricate.
• %: Relativ la proprietatea elementului părinte. 100% = cât părintele.
• pt (puncte): Unități de tipar. 1pt = 1/72 inch ≈ 1.333px.
• vw: 1vw = 1% din lățimea viewportului. 100vw = lățime completă.
• vh: 1vh = 1% din înălțimea viewportului. 100vh = înălțime completă.

Conversii comune

• 1rem = 16px (implicit)
• 1em = 16px (dacă părintele are 16px)
• 100% = dimensiunea părintelui
• 12pt = 16px (comun în tipar)
• 1vw = 19.2px (viewport 1920px)

Metoda 62,5%

Setează html { font-size: 62.5%; } ca să obții 1rem = 10px. Astfel calculele devin mai simple: 1.6rem = 16px, 2.4rem = 24px etc.

Accesibilitate

• Folosește rem pentru fonturi: respectă preferințele utilizatorului
• Evită px pentru fonturi: nu se scalează cu setările utilizatorului
• Folosește unități relative: mai prietenos pentru zoom/magnificare
• Testează cu dimensiuni diferite: verifică zoom 200% și text mare

Design responsive

Folosește rem în media queries: @media (min-width: 48rem) în loc de 768px. Astfel breakpoint-urile se scalează cu preferințele utilizatorului pentru mărimea fontului.

💡 Sfat pro: Folosește rem pentru majoritatea dimensiunilor (fonturi, spațiere, breakpoint-uri), px pentru borduri și detalii fine, iar % sau unități viewport pentru layout-uri. Evită em la spațiere, poate compune neașteptat.