Prelazite između px i rem bez računanja u glavi. Unesite vrednost, postavite osnovnu veličinu fonta (podrazumevano 16px) i dobijte pretvorenu vrednost plus referentnu tabelu za česte veličine. Mali pomoćnik za pisanje skalabilnog, pristupačnog CSS-a — sve radi u vašem pregledaču.
Obično 16.
Unesite vrednost za pretvaranje.
Referenca pri osnovi od 16px
Kako radi
Jedan rem je jednak osnovnoj veličini fonta, pa je pretvaranje samo deljenje i množenje: rem = px ÷ osnova, a px = rem × osnova. Sa uobičajenom osnovom od 16px, 24px je 1,5rem, a 1rem je 16px.
Osnova je font-size na html elementu. Većina pregledača ga podrazumevano postavlja na 16px, ali ga korisnici mogu promeniti, a neki sajtovi postavljaju drugačiju osnovnu veličinu. Promenite polje osnove ovde da odgovara vašem projektu i cela referentna tabela se ažurira.
em radi isto aritmetički, ali je njegova osnova font-size trenutnog elementa umesto korena — pa se em uvećava kada se elementi ugnezde, dok se rem uvek odnosi na jednu vrednost korena. Za predvidiv razmak, rem je obično sigurniji izbor.
Primeri iz prakse
Tekst i naslovi
Sa osnovom od 16px, tekst od 16px je 1rem, a naslov od 32px je 2rem. Izražavanje u rem znači da se oba skaliraju zajedno ako se promeni veličina korena.
Osnova od 10px za „laku matematiku“
Neki programeri postave koren na 62,5% (10px) da pretvaranja budu trivijalna: 20px postaje 2rem, 14px postaje 1,4rem. Postavite osnovu na 10 ovde da preslikate to podešavanje.
Pretvaranje dizajn specifikacije
Dizajn vam daje natpise od 18px i sitne opise od 12px. Pretvorite ih u 1,125rem i 0,75rem da tipografija poštuje korisnikovu podešenu veličinu fonta u pregledaču.
Česta pitanja
Koja je razlika između px i rem?
px je fiksna piksel veličina; rem je relativan u odnosu na osnovnu veličinu fonta. Ako korisnik poveća podrazumevanu veličinu fonta u pregledaču, tekst i razmaci zasnovani na rem se uvećavaju sa njom, dok px vrednosti ostaju fiksne.
Koju osnovnu veličinu fonta da koristim?
Podrazumevano je 16px, što je standardna osnovna veličina u pregledačima i dobra polazna tačka. Menjajte je samo ako vaš projekat postavlja drugačiji font-size na html elementu.
Zašto koristiti rem umesto px?
rem poštuje korisnikovu podešenu veličinu fonta, što je bolje za pristupačnost i olakšava globalno skaliranje — promenite jednu vrednost korena i ceo raspored se srazmerno menja. px je u redu za stvari koje nikad ne treba da se skaliraju, poput ivice od 1px.
Koja je razlika između rem i em?
rem je uvek relativan u odnosu na osnovnu veličinu fonta; em je relativan u odnosu na veličinu fonta trenutnog elementa. Pošto se em uvećava kroz ugnežđene elemente, rem je predvidiviji za većinu dimenzionisanja.
Da li menjanje osnove menja moje postojeće rem vrednosti?
Da — pošto je rem relativan, drugačija veličina korena menja piksel rezultat svake rem vrednosti. To je i poenta: postavite koren jednom i sve se skalira. Ovaj alat prikazuje efekat uživo u referentnoj tabeli.
Koliko su precizni rezultati?
Zaokruženi su na četiri decimale, što je više nego dovoljno za CSS. U praksi često možete zaokružiti i više — na primer 0,875rem za 14px — jer su podpikselne razlike nevidljive.
Mogu li da pretvorim nulu ili negativne vrednosti?
Nula se pretvara u nulu. Negativne vrednosti (recimo za negativne margine) takođe se pretvaraju normalno — samo osnova mora biti pozitivan broj.
Da li da koristim trik sa 62,5%?
Postavljanje korena na 62,5% (10px) olakšava računanje u glavi, ali i smanjuje sve rem podrazumevane vrednosti iz biblioteka i može iznenaditi saradnike. Radi, ali mnogi timovi radije zadrže osnovu od 16px i pretvaraju po potrebi.
Da li se nešto šalje na server?
Ne. Pretvaranje je čista aritmetika u vašem pregledaču; ništa što unesete ne napušta vaš uređaj.
Srodni alati
Konverter boja
Pretvarajte boje između HEX, RGB i HSL, sa podrškom za providnost i živim uzorkom. Radi u pregledaču.
Alati za programere
Kalkulator odnosa stranica
Nađite pojednostavljen odnos stranica za bilo koju širinu i visinu i promenite veličinu uz očuvanje tog odnosa. Radi u pregledaču.
Alati za programere
Provera kontrasta boja
Proverite WCAG odnos kontrasta između boje teksta i pozadine, sa AA i AAA prolazom ili padom.
Alati za programere
CSS minifikacija
Minifikujte CSS u pregledaču — uklonite komentare i razmake da smanjite fajl, uz poređenje veličine pre i posle. Ništa se ne šalje.
Alati za programere
JSON formatiranje
Ulepšajte, proverite ili minifikujte JSON u pregledaču — uz jasne poruke o greškama. Ništa se ne šalje.
Alati za programere
Base64 kodiranje i dekodiranje
Kodirajte tekst u Base64 ili ga dekodirajte nazad, bezbedno za UTF-8 i URL varijantu. Radi u potpunosti u pregledaču.
Alati za programere