Convertor unități CSS

Instrument de conversie px, em, rem, %, vw, vh

Cum se folosește

Convertește unitățile CSS în doar 3 pași simpli:

Pasul 1: Introdu valoarea
Introduceți valoarea numerică pe care doriți să o convertiți. De exemplu: 16, 1.5, 100 etc.
Pasul 2: Selectați unitățile
Selectați unitățile sursă și țintă. Pentru unități relative (em, rem, %) setați valorile de bază.
Pasul 3: Verificați rezultatul
Rezultatele sunt afișate în timp real. Modificarea valorilor de bază actualizează rezultatele instantaneu.

Instrument convertor unități CSS

Setări valori de bază

Dimensiune font de bază De obicei implicitul browserului (16px)

Lățime viewport Pentru calcul vw, vmin, vmax (ex.: 1920px)

Înălțime viewport Pentru calcul vh, vmin, vmax (ex.: 1080px)

Valoare sursă

Unitate sursă

Rezultat conversie

Unitate țintă

Cazuri practice de utilizare

Instrumentul Convertor unități CSS este util în următoarele scenarii:

1. Calcul pentru design responsive

Când un design specifică '32px pentru titlu', conversia la '2rem' (bază 16px) permite adaptarea la setările de dimensiune a fontului utilizatorului. Eficient pentru accesibilitate.

2. Layout cu unități vw/vh

Pentru a obține '50% din lățimea ecranului', poți converti '50vw' în '960px' (ecran 1920px) pentru verificare. Ajută la înțelegerea aspectului pe diferite ecrane.

3. Creare CSS pentru print

Când '14pt' este specificat pentru stiluri de print, știind că echivalează cu '18.67px' ajută la verificarea diferențelor față de afișarea pe ecran.

4. Construirea sistemelor de design

Creează tabele de conversie precum 'bază 16px, heading 1.5em = 24px' pentru scală coerentă între echipe. Scrie CSS ușor de întreținut.

5. Migrarea site-ului la rem

Convertește 'font-size: 18px' al unui site vechi în '1.125rem' pentru migrare treptată la unități rem. Îmbunătățește mentenabilitatea și accesibilitatea.

6. Design Mobile-First

Calculează '5vw = 18.75px' pe mobil (lățime 375px) și '5vw = 96px' pe desktop (1920px) pentru a seta breakpoints adecvate.

Despre conversia unităților CSS

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.

Beneficiile instrumentului

Convertorul unităților CSS oferă următoarele avantaje:

Conversie în timp real: Rezultatele se afișează simultan cu introducerea, permițând verificare rapidă în timpul dezvoltării.
Valori de bază personalizabile: Setați liber dimensiunea fontului și dimensiunile viewportului pentru a calcula valori în diferite medii.
Suport pentru 15 tipuri de unități: Suportă 15 unități: px, em, rem, %, vw, vh, vmin, vmax, pt, pc, cm, mm, in, ch, ex.
Suport pentru design responsive: Calculați vw/vh pentru diferite dimensiuni de ecran — util la planificarea layout-urilor responsive.
Complet gratuit și fără instalare: Gata de utilizare imediat în browser — nu necesită instalare sau înregistrare. Toate funcțiile sunt gratuite.

Care este diferența dintre em și rem?

em se bazează pe dimensiunea fontului elementului părinte, iar rem se bazează pe dimensiunea fontului elementului root (html). em se poate acumula la înglobare; rem face referire întotdeauna la root, fiind mai predictibil.

Câți pixeli are 1rem?

Cu setările implicite ale browserului, 1rem = 16px. Aceasta se schimbă dacă utilizatorul modifică dimensiunea fontului în browser.

Care e diferența dintre vw și procent (%)?

vw se bazează întotdeauna pe lățimea viewportului, în timp ce % se bazează pe lățimea elementului părinte. Exemplu: pe un ecran de 1920px, 50vw = 960px; width: 50% depinde de containerul părinte.

De ce să folosesc rem în loc de px?

px este o mărime fixă și ignoră setările utilizatorului; rem respectă aceste preferințe, îmbunătățind accesibilitatea când utilizatorii măresc textul.

Ce sunt vmin și vmax?

vmin este 1% din dimensiunea mai mică a viewportului (lățime sau înălțime), vmax este 1% din dimensiunea mai mare. Pe 1920×1080, 1vmin ≈ 10.8px și 1vmax ≈ 19.2px.

Ar trebui să folosesc pt pentru CSS de print?

pt este folosit tradițional la tipar (1pt = 1/72 inch). Pentru a suporta atât ecranul, cât și tiparul, este recomandat să folosiți media queries sau px/rem pentru ecran și pt în @media print.

Cum schimb dimensiunea fontului de bază?

Setați pe elementul root: html { font-size: 16px; }. Unii dezvoltatori folosesc 62.5% (echivalent cu 10px) pentru calcule mai simple, dar implicitul (100% = 16px) este recomandat pentru a respecta preferințele utilizatorului.

Ce este unitatea ch?

ch se bazează pe lățimea caracterului '0'. Util pentru fonturi monospace, dar imprecis pentru fonturi proporționale. Folosit frecvent pentru a specifica lățimea câmpurilor de input, ex.: '30ch'.