Konvertor CSS jedinica (px / rem / em / vh / vw)

Zašto rem umesto px

Pregledači počinju sa 16px, ali osobe sa slabijim vidom često povećavaju podrazumevanu veličinu fonta u podešavanjima pregledača. Tekst čija je veličina izražena u rem raste zajedno sa tim podešavanjem, dok tekst u px ne raste. Uvećanje stranice povećava oba, ali se mnogi čitaoci oslanjaju upravo na podešavanje veličine fonta, a WCAG kriterijum za promenu veličine teksta očekuje da se tekst uveća do 200% bez gubitka sadržaja ili funkcionalnosti. Veličinu teksta i razmake oko njega zadajte u rem, a px zadržite za tanke linije i ivice.

Kolona em i ugnježđivanje

Em je relativan u odnosu na veličinu fonta samog elementa, a kod samog font-size to znači veličinu fonta roditelja. Em vrednosti ovde pretpostavljaju da je roditelj na osnovnoj veličini, što važi samo na najvišem nivou. Unutar elementa sa 0.875em, 0.875em ponovo daje 12.25px umesto 14px, pa se smanjivanje kumulira. Zato je rem sigurniji podrazumevani izbor, dok je em prikladan za razmake koji treba da se skaliraju zajedno sa tekstom komponente.

Osnova od 62.5% i jedinice viewporta

Podešavanje html { font-size: 62.5% } čini da 1rem bude jednako 10px, što olakšava računanje; unesite 10 kao osnovnu veličinu da biste to uskladili. Time se smanjuje sve ostalo izraženo u rem jedinicama, uključujući komponente trećih strana, pa ponovo podesite čitljivu veličinu za body.

Vrednosti vw i vh pretpostavljaju viewport dimenzija 1440 × 900. Na telefonima 100vh može biti veće od vidljive površine dok je traka pregledača prikazana; jedinice 100svh i 100dvh uzimaju to u obzir.

Kako se koristi

1. Unesite vrednost u pikselima (px) i osnovnu veličinu korena (podrazumevano 16px).
2. Pogledajte izračunate vrednosti za rem, em, vw i vh.
3. Kopirajte CSS isečke spremne za upotrebu ili pogledajte tabelu skale.

Privatnost i ograničenja

Radi odmah u JavaScript-u na strani klijenta.