Hvad er CSS-enhed-omregner?
CSS understøtter flere forskellige enheder til størrelser – absolutte som px og pt samt relative som rem, em, vw, vh og %. Relative enheder er essentielle for responsivt, tilgængeligt design (rem respekterer især brugerens fontstørrelsespræference i browseren), men at konvertere mellem dem mentalt er reelt svært, da resultatet afhænger af konteksten: rodens fontstørrelse, det aktuelle elements fontstørrelse eller viewport-dimensionerne.
Denne konverter klarer regnestykket for dig: angiv din basisfontstørrelse, viewport-dimensioner og den værdi, du konverterer fra, og se straks den tilsvarende værdi i alle andre enheder – nyttig til at omsætte et designmockups pixelmålinger til responsive rem/vw-værdier eller til at dobbelttjekke, hvad en eksisterende CSS-regel faktisk viser på skærmen.
Hvornår skal du bruge denne regnemaskine
- Når du omsætter en designers pixelbaserede specifikation til responsive rem- eller vw-værdier til CSS
- Når du tjekker, hvad en vw-baseret responsiv fontstørrelse faktisk gengives som ved en bestemt skærmbredde
- Når du konverterer ældre pt-baseret print- eller e-mail-CSS til webstandard-px eller -rem
- Når du auditerer, om et design-systems afstandsskala falder rent sammen på tværs af forskellige enheder
- Når du sanity-tjekker en CSS-værdi under kodegennemgang uden at åbne udviklingsværktøjer i browseren
- Når du bygger tilgængelige sites, der har brug for rem-baseret størrelse for at respektere brugerens fontpræferencer
Trin:
- Indtast den værdi, du vil konvertere, og vælg dens startenhed.
- Angiv din basisfontstørrelse (standard er browserstandardens 16px).
- Ved vw/vh-konverteringer skal du angive din ønskede viewport-bredde og -højde.
- Se straks den tilsvarende værdi i alle andre enheder.
Formel
1rem = 1em = basisfontstørrelse (standard 16px)
1pt = 96/72 px ≈ 1.333px
1vw = viewport-bredde / 100
1vh = viewport-højde / 100
1% = referenceværdi / 100
Anvendelsessager
- Konvertere en designers pixelbaserede Figma/Sketch-specifikation til rem-værdier for tilgængelig CSS
- Tjekke, hvad en vw-baseret responsiv fontstørrelse faktisk gengives som ved en bestemt skærmbredde
- Omsætte ældre pt-baseret print- eller e-mail-CSS til webstandard-px eller -rem
- Auditere, om et design-systems afstandsskala falder rent sammen på tværs af enheder
- Hurtigt sanity-tjekke en CSS-værdi under kodegennemgang uden at åbne udviklingsværktøjer
Nøglefordele
- Konverterer mellem alle 7 almindelige CSS-enheder ét sted
- Bruger din faktiske basisfontstørrelse og viewport, ikke en fast antagelse
- Øjeblikkelige resultater, mens du skriver – ingen grund til at åbne udviklingsværktøjer
- Gratis, ingen tilmelding, kører helt i din browser
Pro tips
- Foretræk rem frem for em til fontstørrelser for at undgå uventet akkumulering i indlejrede komponenter
- Brug dvh/svh i stedet for vh til mobile fuldskærmslayouts, hvis dine målbrowsere understøtter det
- Behold en konsistent basisfontstørrelse i hele dit design-system, så rem-konverteringer forbliver forudsigelige
- Når du omsætter et pixel-perfekt design, så konverter afstande til rem, men behold kantbredder og andre fine detaljer i px
Almindelige fejl at undgå
- At antage, at 1rem altid svarer til 16px, uden at tjekke, om rodens fontstørrelse er ændret
- At bruge vh til mobile fuldhøjdelayouts uden at tage højde for browserens adresselinjeadfærd
- At indlejre em-baserede fontstørrelser og blive overrasket, når de akkumuleres uventet
- At blande px og rem inkonsistent i samme komponent og bryde tilgængelighedsskaleringen
Nøglebegreber forklaret
- Rodens fontstørrelse: Den font-størrelse, der er sat på HTML-elementet, som alle rem-enheder er relative til
- Viewport: Det synlige område af en webside i browservinduet
- Absolut enhed: En enhed som px eller pt med en fast størrelse i virkeligheden, ikke relativ til nogen kontekst
- Relativ enhed: En enhed som rem, em, vw eller %, hvis størrelse afhænger af en anden værdi
Relaterede begreber
- Farvekonverter: Konverter mellem farveformaterne HEX, RGB og HSL
- Længdekonverter: Konverter mellem tommer, centimeter, pixels og mere
- Enhedskonverter: Konverter mellem forskellige måleenheder
- Kalkulator for billedforhold: Beregn og konverter billedforhold
- Datakonverter: Konverter mellem bytes, KB, MB, GB og TB
Eksempel
Ved en basisfontstørrelse på 16px konverteres 1.5rem til 24px. Ved en viewport-bredde på 1440px konverteres 5vw til 72px.
Fortolkning af dine resultater
Konverteren tager en værdi i én CSS-enhed og viser tilsvarende værdier i alle andre. Den vigtigste variabel er din basisfontstørrelse (standard 16px), som bestemmer forholdet mellem rem og px. Da rem er relativ til rod-elementets (HTML) fontstørrelse, vil en ændring af basisværdien flytte alle rem-ækvivalenter andelalt.
For responsive enheder (vw, vh) skal du angive dine ønskede viewport-dimensioner for at se, hvordan værdierne oversættes ved specifikke skærmstørrelser. Det er især nyttigt for at forstå, om en 5vw-overskrift vil være læsbar på en 320px-mobilskaerm (16px) versus en 1440px-desktop (72px). Konverteren hjælper dig med at træffe informerede beslutninger om, hvilken enhed du skal bruge i hver kontekst.