PX til REM til EM Konverter – Gratis CSS Enhedsberegner
Konverter pixels til REM og EM enheder øjeblikkeligt. Gratis CSS enhedskonverter til responsivt webdesign. Understøtter brugerdefinerede skriftstørrelser og realtidsberegninger for nøjagtige resultater.
PX, REM og EM Enhedskonverter
Konverter mellem pixels (PX), rod em (REM) og em (EM) enheder. Indtast en værdi i et hvilket som helst felt for at se de tilsvarende værdier i de andre enheder.
Konverteringsformler
- PX til REM: værdi i px ÷ rod skriftstørrelse
- PX til EM: værdi i px ÷ overordnet skriftstørrelse
- REM til PX: værdi i rem × rod skriftstørrelse
- EM til PX: værdi i em × overordnet skriftstørrelse
Dokumentation
Konverter til enhederne PX, REM og EM
En konverter fra px til rem og em ændrer en CSS-længde mellem pixels (px), root em (rem) og em ved hjælp af en skriftstørrelse for roden og en skriftstørrelse for det overordnede element, som brugeren angiver. De tre enheder er de mest almindelige måder at angive tekst- og afstandsstørrelser på i CSS, det sprog der bruges til at formatere websider.
Hvad er px, rem og em?
En pixel (px) er en fast enhed. En boks med bredden 200px forbliver 200px bred, uanset hvilken skriftstørrelse siden bruger.
En rem ("root em") er en enhed, der skalerer med skriftstørrelsen for sidens rodelement, normalt tagget <html>. De fleste browsere angiver skriftstørrelsen for roden til 16px, medmindre webstedet ændrer den. Hvis skriftstørrelsen for roden er 16px, svarer 1rem til 16px.
En em er en enhed, der skalerer med skriftstørrelsen for det overordnede element, altså det element der indeholder den. Hvis et overordnet element har font-size: 20px, svarer 1em inden i dette element til 20px.
Den vigtigste forskel mellem rem og em er, hvad de hver især måles i forhold til. Rem ser altid på rodelementet. Em ser på det nærmeste overordnede element, så værdien kan ændre sig på hvert indlejringsniveau.
Sådan beregnes px til rem
Omregn pixels til rem ved at dividere pixelværdien med skriftstørrelsen for roden:
hvor r er længden i rem, p længden i pixels, og R skriftstørrelsen for roden i pixels.
Regneeksempel
Med standardstørrelsen for roden på 16px omregnes 24px til:
24 ÷ 16 = 1,5rem
Hvis et websted angiver skriftstørrelsen for roden til 10px (et almindeligt trick, der udføres ved at angive html { font-size: 62.5%; }, eftersom 62,5 % af 16px er 10px), bliver de samme 24px til:
24 ÷ 10 = 2,4rem
Sådan beregnes rem til px
Gå den anden vej ved at gange rem-værdien med skriftstørrelsen for roden:
hvor p er længden i pixels, r længden i rem, og R skriftstørrelsen for roden.
Med en rod på 16px omregnes 1.5rem tilbage til 1,5 × 16 = 24px.
Sådan beregnes px til em
Omregn pixels til em ved at dividere pixelværdien med skriftstørrelsen for det overordnede element:
hvor e er længden i em, og P skriftstørrelsen for det overordnede element i pixels.
Regneeksempel
Hvis skriftstørrelsen for det overordnede element er 20px, omregnes 24px til:
24 ÷ 20 = 1,2em
Sådan beregnes em til px
Gang em-værdien med skriftstørrelsen for det overordnede element:
hvor p er længden i pixels, e længden i em, og P skriftstørrelsen for det overordnede element.
Med et overordnet element på 20px omregnes 1.2em tilbage til 1,2 × 20 = 24px.
Sådan beregnes rem til em og em til rem
Da rem og em måles i forhold til forskellige skriftstørrelser, kræver omregning mellem dem både skriftstørrelsen for roden og skriftstørrelsen for det overordnede element:
hvor R er skriftstørrelsen for roden, og P skriftstørrelsen for det overordnede element.
Regneeksempel
Med en skriftstørrelse for roden på 16px og en skriftstørrelse for det overordnede element på 20px omregnes 2rem til:
2 × (16 ÷ 20) = 1,6em
Hvis skriftstørrelserne for roden og det overordnede element er ens, svarer 1rem altid til 1em.
Hvornår de enkelte enheder er nyttige
Pixels fungerer godt til detaljer, der ikke bør ændre størrelse, f.eks. en kant på 1px eller et ikon med fast bredde.
Rem bruges ofte til afstande og typografi, der bør forblive ensartet på en side. Da rem altid henviser til skriftstørrelsen for roden, ændrer en rem-værdi sig ikke, uanset hvor dybt et element er indlejret. Det betyder også, at rem-baserede layout automatisk tilpasses, når en bruger øger browserens standardskriftstørrelse, hvilket hjælper læsere med nedsat syn.
Em fungerer godt i en enkelt, selvstændig komponent, f.eks. en knap, hvor indvendig afstand bør skalere sammen med knappens egen skriftstørrelse. Et almindeligt problem med em er, at værdien akkumuleres: Hvis flere indlejrede elementer hver bruger font-size: 1.2em, ganger hvert niveau værdien fra det foregående niveau, så skriftstørrelserne vokser hurtigere end tilsigtet.
1.level-1 { font-size: 1.2em; } /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; } /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; } /* 27.65px (23.04px × 1.2) */
4Efter tre niveauer er teksten vokset med omkring 73 %, ikke de 20 % som en udvikler måske forventer af en enkelt regel med 1.2em.
Brug af omregneren
- Indtast en værdi i pixel-, rem- eller em-feltet.
- De to andre felter opdateres automatisk og afrundes til fire decimaler.
- Indstil skriftstørrelsen for roden, så den svarer til projektets
<html>-element. Den er som standard 16px i de fleste browsere og påvirker kun rem. - Indstil skriftstørrelsen for det overordnede element, så den svarer til skriftstørrelsen for det element, som en em-værdi ville være placeret i. Den påvirker kun em.
- Brug kopieringsknappen ved siden af et felt til at kopiere dets værdi.
Begge felter til skriftstørrelse accepterer et helt antal pixels, og den mindste tilladte værdi er 1px. Nulstillingsknappen rydder værdien og sætter begge skriftstørrelser tilbage til 16px.
Under felterne tegner værktøjet én bjælke for hver enhed. Alle tre bjælker repræsenterer den samme fysiske længde, så de får samme bredde, hvilket er en hurtig kontrol af, at omregningen er korrekt. En bjælke tegnes i sin faktiske pixellængde op til 300px; alt der er længere skaleres ned, så det passer, og derfor ender en værdi på 600px og en værdi på 900px begge ved 300px. Bjælkerne vises kun, når pixelværdien er større end nul.
Ofte stillede spørgsmål
Hvad er forskellen mellem rem og em? Rem henviser altid til rodelementets skriftstørrelse. Em henviser til skriftstørrelsen for det nærmeste overordnede element. En rem-værdi forbliver den samme overalt på en side, mens en em-værdi kan ændre sig afhængigt af, hvor dybt elementet er indlejret.
Hvorfor bruger browsere 16px som standardskriftstørrelse? 16px har længe været standardtekststørrelsen i de store browsere, fordi den er behagelig at læse på typiske skærme uden ekstra formatering. Retningslinjer for webtilgængelighed anbefaler, at tekst kan forstørres til 200 % uden at ødelægge sidens layout, og 16px er et praktisk udgangspunkt for dette.
Hvad er 62,5 %-tricket?
Ved at angive html { font-size: 62.5%; } ændres standardskriftstørrelsen for roden på 16px til 10px, eftersom 62,5 % af 16 er 10. Det gør rem-beregninger enklere, fordi 1,6rem svarer til 16px, og 2,4rem svarer til 24px.
Kan px-, rem- og em-værdier være negative? Ja, for egenskaber der accepterer negative længder, f.eks. margener eller CSS-transformationer. Indvendig afstand kan ikke være negativ i CSS; browsere ignorerer en negativ værdi for indvendig afstand. Konverteren håndterer negative værdier, men tegner ingen bjælker for dem, fordi en bjælke ikke kan have negativ bredde.
Bør alle pixelværdier omregnes til rem? Ikke nødvendigvis. Kanter og andre fine detaljer angives normalt i pixels, eftersom de sjældent behøver at skalere med skriftstørrelsen og kan se ujævne ud ved bredder på under en pixel. Rem egner sig til afstande og typografi, der bør skalere med brugerens indstilling for skriftstørrelse.
Påvirker valget af enhed sidens ydeevne? Nej. Browsere omregner alle CSS-længder til den samme interne værdi under layoutberegningen, så px, rem og em gengives lige hurtigt. Valget mellem dem påvirker vedligeholdelse og tilgængelighed, ikke hastigheden.