Konverter px, em, rem, pt og % med konfigurerbar basisskriftstørrelse — full ekvivalenstabell i nettleseren din.
CSS måler lengde i flere enheter som alle ender som piksler på skjermen, og å konvertere mellom dem for hånd er en daglig irritasjon i frontend-arbeid. Denne konvertereren tar én verdi — i px, em, rem, pt eller prosent — og viser samme lengde i alle fem enheter på én gang, med en basisskriftstørrelse du styrer. Standardbasen er 16 px, startskriftstørrelsen i alle store nettlesere, men hvis designsystemet ditt setter html { font-size: 62.5% } eller en annen rotstørrelse, endrer du basen og hele tabellen tilpasser seg.
Sammenhengene er lineære, og verktøyet viser formlene det bruker: em- og rem-verdier multipliseres med basisskriftstørrelsen for å få piksler, punkter konverteres med det CSS-definerte forholdet 96 px per 72 pt (så 1 pt = 1,333 px), og prosenter leses relativt til basen, akkurat som em. Ett ærlig forbehold verktøyet oppgir på skjermen: em og rem gir identiske resultater her fordi én felles base brukes for begge. På en ekte side er de forskjellige — rem refererer alltid til rotelementet, mens em refererer til skriftstørrelsen til det gjeldende elementet, som selv kan være skalert av foreldrene sine.
Typiske bruksområder: oversette en designleveranse i piksler til rem-verdiene kodebasen din standardiserer på, sjekke hva 0.875 rem tilsvarer før du skriver en media query, konvertere print-orienterte pt-størrelser fra en stilguide til skjermenheter, eller sette opp tilgjengelige typografiskalaer som respekterer brukerens nettleserinnstillinger. Konverteringen kjører 100 % i nettleseren din mens du skriver — ingenting lastes opp, og det er ingenting å installere.
px = em × base; px = rem × base; px = pt × 96 ÷ 72; px = % ÷ 100 × base. Invers: em = rem = px ÷ base; pt = px × 72 ÷ 96; % = px ÷ base × 100. Med standardbasen på 16 px: 1.5 em = 24 px = 18 pt = 150%.
rem er alltid relativ til rotens (html) skriftstørrelse, mens em er relativ til skriftstørrelsen til det gjeldende elementet, som arves og forsterkes gjennom treet. Denne konvertereren bruker én base for begge, så tallene stemmer overens her; i nøstede elementer kan de avvike.
Fordi alle store nettlesere leveres med en startskriftstørrelse på 16 px, så 1 rem = 16 px på en uberørt side. Hvis CSS-en din endrer rotstørrelsen — det populære 62.5%-trikset gjør 1 rem = 10 px — setter du den verdien i basisfeltet.
Multipliser med 72 og del på 96: CSS fastsetter forholdet til 96 px per tomme og 72 pt per tomme, så 16 px = 12 pt. Enheten pt betyr mest for print-stilark og dokumenter.
rem anbefales generelt for typografi fordi det skalerer når brukere endrer foretrukket skriftstørrelse i nettleseren, noe px ignorerer. px er fortsatt greit for ting som ikke skal skalere med teksten, som kantlinjer eller skygger.
Nei. Konverteringen er en håndfull multiplikasjoner gjort i JavaScript på enheten din — ingenting sendes til noen server eller lagres noe sted.
Vai.la gjør enhver URL om til en kortlenke med klikkstatistikk, QR Code og din egen biolink.
Vai.la er ikke ansvarlig for hvordan verktøyene brukes, eller for beslutninger tatt på grunnlag av resultatene.