CSS-enhetskonverterer

Konverter mellom px, rem, em, pt, vw, vh og % umiddelbart, med din egen grunnleggende skriftstørrelse og visningsportdimensjoner — ikke flere gjetninger om hva 1,5rem egentlig er i piksler.

Hjalp denne kalkulatoren deg?

Hva er CSS-enhetskonverterer?

CSS støtter flere forskjellige enheter for størrelser — absolutte som px og pt, og relative som rem, em, vw, vh og %. Relative enheter er essensielle for responsiv, tilgjengelig design (rem respekterer spesielt brukerens skriftstørrelsepreferanse i nettleseren), men å konvertere mellom dem mentalt er genuint vanskelig, siden resultatet avhenger av kontekst: rotens skriftstørrelse, det gjeldende elementets skriftstørrelse, eller visningsportens dimensjoner. Denne konverteren gjør denne matematikken for deg: angi din grunnleggende skriftstørrelse, visningsportdimensjoner og verdien du konverterer fra, og se den tilsvarende verdien i alle andre enheter umiddelbart — nyttig for å oversette pikselmål fra en designskisse til responsive rem/vw-verdier, eller for å dobbeltsjekke hva en eksisterende CSS-regel faktisk gjengis som på skjermen.

Når du bør bruke denne kalkulatoren

  • Når du oversetter en designers pikselbaserte spesifikasjon til responsive rem- eller vw-verdier for CSS
  • Når du sjekker hva en vw-basert responsiv skriftstørrelse faktisk gjengis som ved en bestemt skjermbredde
  • Når du konverterer eldre pt-basert print- eller e-post-CSS til webstandard px eller rem
  • Når du reviderer om et designsystems avstandsskala stemmer overens på tvers av forskjellige enheter
  • Når du dobbeltsjekker en CSS-verdi under kodegjennomgang uten å åpne nettleserens utviklerverktøy
  • Når du bygger tilgjengelige nettsteder som trenger rem-basert størrelse for å respektere brukerens skriftpreferanser

Trinn:

  1. Angi verdien du vil konvertere og velg startenheten.
  2. Sett din grunnleggende skriftstørrelse (standard er nettleserstandarden på 16px).
  3. For vw/vh-konverteringer, angi ønsket visningsportbredde og -høyde.
  4. Les den tilsvarende verdien i alle andre enheter umiddelbart.

Formel

1rem = 1em = grunnleggende skriftstørrelse (standard 16px) 1pt = 96/72 px ≈ 1,333px 1vw = visningsportbredde / 100 1vh = visningsporthøyde / 100 1% = referanseverdi / 100

Bruksområder

  • Konvertere en designers pikselbaserte Figma/Sketch-spesifikasjon til rem-verdier for tilgjengelig CSS
  • Sjekke hva en vw-basert responsiv skriftstørrelse faktisk gjengis som ved en bestemt skjermbredde
  • Oversette eldre pt-basert print- eller e-post-CSS til webstandard px eller rem
  • Revidere om et designsystems avstandsskala stemmer overens på tvers av enheter
  • Raskt sjekke en CSS-verdi under kodegjennomgang uten å åpne utviklerverktøy

Nøkkelfordeler

  • Konverterer mellom alle 7 vanlige CSS-enheter på ett sted
  • Bruker din faktiske grunnleggende skriftstørrelse og visningsport, ikke en fast antagelse
  • Umiddelbare resultater mens du skriver — ingen grunn til å åpne nettleserens utviklerverktøy
  • Gratis, ingen registrering, kjører helt i nettleseren din

Profftips

  • Foretrekk rem fremfor em for skriftstørrelser for å unngå uventet forsterkning i nestede komponenter
  • Bruk dvh/svh i stedet for vh for mobile fullskjermlayouter hvis dine målnettlesere støtter det
  • Hold en konsistent grunnleggende skriftstørrelse på tvers av designsystemet ditt slik at rem-konverteringer forblir forutsigbare
  • Når du oversetter en pikselperfekt design, konverter avstand til rem, men behold kantbredder og andre finjusteringer i px

Vanlige feil å unngå

  • Anta at 1rem alltid tilsvarer 16px, uten å sjekke om rotens skriftstørrelse ble endret
  • Bruke vh for mobile fullhøydelayouter uten å ta hensyn til nettleserens adressefeltoppførsel
  • Neste em-baserte skriftstørrelser og bli overrasket når de forsterkes uventet
  • Blande px og rem inkonsekvent innenfor samme komponent, noe som ødelegger tilgjengelighetsskalering

Nøkkelbegreper forklart

Grunnleggende skriftstørrelse: Skriftstørrelsen satt på html-elementet, som alle rem-enheter er relative til
Visningsport: Det synlige området av en nettside i nettleservinduet
Absolutt enhet: En enhet som px eller pt med en fast fysisk størrelse, ikke relativ til noen kontekst
Relativ enhet: En enhet som rem, em, vw eller % hvis størrelse avhenger av en annen verdi

Relaterte konsepter

Eksempel

Ved en grunnleggende skriftstørrelse på 16px konverteres 1,5rem til 24px. Ved en visningsportbredde på 1440px konverteres 5vw til 72px.

Tolke resultatene dine

Konverteren tar en verdi i én CSS-enhet og viser tilsvarende verdier i alle andre. Nøkkelvariabelen er din grunnleggende skriftstørrelse (standard 16px), som bestemmer forholdet mellom rem og px. Siden rem er relativ til rot-html-elementets skriftstørrelse, vil endring av denne grunnverdien forskyve alle rem-tilsvarigheter proporsjonalt. For responsive enheter (vw, vh), angi ønsket visningsportdimensjoner for å se hvordan verdiene oversettes ved bestemte skjermstørrelser. Dette er spesielt nyttig for å forstå om en 5vw-overskrift vil være lesbar på en 320px mobilskjerm (16px) versus en 1440px stasjonær skjerm (72px). Konverteren hjelper deg med å ta informerte beslutninger om hvilken enhet du skal bruke i hver kontekst.

Ofte stilte spørsmål

Hva er forskjellen mellom rem og em?
rem er alltid relativ til rotelementets (html) skriftstørrelse, så den holder seg konsistent uansett hvor dypt nestet et element er. em er relativ til det gjeldende elementets egen skriftstørrelse, noe som betyr at den kan forsterkes ved nesting — dette verktøyet behandler begge på samme måte for enkelhets skyld, ved å bruke din grunnleggende skriftstørrelse.
Hvorfor tilsvarer 1rem vanligvis 16px?
16px er standard nettleserskriftstørrelse for rot-html-elementet i praktisk talt alle nettlesere. Siden rem er relativ til den rotstørrelsen, tilsvarer 1rem 16px med mindre siden (eller brukerens nettleserinnstillinger) eksplisitt endrer rotens skriftstørrelse.
Hva brukes vw og vh til?
vw (visningsportbredde) og vh (visningsporthøyde) er prosentandeler av nettleservinduets gjeldende bredde og høyde — 1vw tilsvarer 1 % av visningsportens bredde. De brukes ofte for fullskjermlayouter og responsiv typografi som skalerer med skjermen.
Er en piksel alltid nøyaktig 1/96 av en tomme?
Ifølge CSS-spesifikasjonen, ja — en CSS-piksel er definert som 1/96 av en tomme, som også er grunnen til at 1pt (1/72 av en tomme) konverteres til nøyaktig 96/72 = 1,333 CSS-piksler.
Når bør jeg bruke rem fremfor px for skriftstørrelser?
Bruk rem for skriftstørrelser for å støtte tilgjengelighet — det respekterer brukere som endrer nettleserens standard skriftstørrelse. Bruk px for kantbredder, skygger og andre finjusteringer der du ønsker faste størrelser. De fleste moderne designsystemer bruker rem for avstand og typografi, og px kun for små dekorative elementer.
Hva skjer hvis brukeren endrer nettleserens skriftstørrelse?
Hvis du bruker rem-enheter, skaleres hele layouten proporsjonalt med brukerens skriftstørrelsepreferanse. Dette er en stor gevinst for tilgjengelighet — brukere med synshemninger kan forstørre tekst uten at layouten din brytes. Hvis du bruker px, forblir layouten fast og brukerne kan ikke enkelt endre tekststørrelsen.
Hvorfor er 1rem vanligvis 16px?
16px er standard skriftstørrelse for rot-html-elementet i praktisk talt alle nettlesere. Siden rem er relativ til denne rotstørrelsen, tilsvarer 1rem 16px som standard. Brukere eller utviklere kan endre denne grunnstørrelsen, som er nettopp grunnen til at rem er nyttig — alle rem-verdier skaleres når grunnverdien endres.
Hva er dvh, svh og lvh?
Dette er nyere visningsporthøyde-enheter: dvh (dynamisk visningsporthøyde) justeres etter hvert som nettleserens adressefelt vises/skjules, svh (liten visningsporthøyde) bruker minst mulig høyde, og lvh (stor visningsporthøyde) bruker størst mulig. De løser det klassiske mobile vh-problemet der innhold skjules bak adressefeltet.
Kan jeg bruke rem for marger og fyllinger?
Ja, og det anbefales for konsistent avstand. Mange designsystemer definerer en avstandsskala i rem (f.eks. 0,25rem, 0,5rem, 0,75rem, 1rem, 1,5rem, 2rem) slik at alle avstandsverdier er multipler av 4px ved 16px grunnleggende skriftstørrelse. Dette skaper visuell rytme og skalerer med brukerens skriftpreferanser.
Hvordan konverterer jeg en pikselbasert design til rem?
Del hver pikselverdi på din grunnleggende skriftstørrelse (vanligvis 16). For eksempel: 24px = 1,5rem, 32px = 2rem, 48px = 3rem. For oddetall, rund av til nærmeste 0,25rem for rene verdier. Avstand på 1px eller 2px kan forbli i px siden slike bittesmå verdier ikke trenger skalering.
Hva er forskjellen mellom em og rem?
rem er alltid relativ til rotelementets (html) skriftstørrelse, og holder seg konsistent uansett nesting. em er relativ til det gjeldende elementets skriftstørrelse, noe som forsterkes ved nesting — en 1,5em-overskrift inne i et 1,2em-avsnitt vises som 1,5 x 1,2 x grunnverdi = 28,8px. Bruk rem for forutsigbar størrelse.

Oppdag flere verktøy

Ferske utvalg fra hele verktøybiblioteket vårt.

Beregner for erstatning ved personskade

Sikker uttaksrate-kalkulator

Tetthetskalkulator

El vs bensin-sparekalkulator

Bokstavkarakterkalkulator

ROAS-kalkulator