PX til REM-konverter
Regn om px til rem og em med valgfri rotskriftstørrelse, lag en konverteringstabell og gjør alle px-verdier i en CSS-snutt om til rem med ett klikk.
em er relativ til skriftstørrelsen i det overordnede elementet, rem til rotelementet (html).
Konverter en verdi
Konverteringstabell for mange verdier
| px | rem | em |
|---|
Konverter en CSS-snutt
Slik bruker du PX til REM-konverteren
- Sett Rotskriftstørrelse (px). Den er 16 i alle store nettlesere med mindre stilarket ditt endrer den. Knappene under feltet bytter til 16 px, 10 px (
html { font-size: 62.5%; }-trikset) eller 18 px. - Hvis du jobber med em, setter du Skriftstørrelse i overordnet element for em (px): den beregnede skriftstørrelsen til elementet som inneholder det du stiler.
- Under Konverter en verdi skriver du i Piksler (px), REM eller EM. De to andre feltene oppdateres mens du skriver, og linjen under viser divisjonen som er brukt.
- Konverteringstabell for mange verdier lister vanlige størrelser. Bytt ut Pikselverdier med dine egne designtokens (avstandsskala, typografiskala …) og bruk Kopier tabell for å lime resultatet inn i et regneark eller et designdokument.
- For å migrere eksisterende kode limer du den inn i CSS som skal konverteres, velger alternativene og klikker på Konverter px til rem. Last inn et eksempel viser et lite stilark. Kopier Konvertert CSS med Kopier.
Konverteringen skjer helt og holdent i nettleseren din. Ingenting du limer inn, forlater enheten din.
Formlene
- rem = px ÷ rotskriftstørrelse. Med standard 16 px er 24px = 24 ÷ 16 = 1,5rem.
- em = px ÷ skriftstørrelse i overordnet element. Inni en overskrift på 20 px er 10px = 0,5em.
- px = rem × rotskriftstørrelse, og px = em × skriftstørrelse i overordnet element.
rem eller em: hvilken bør du bruke?
rem («rot-em») viser alltid til skriftstørrelsen i html-elementet, så 1.5rem betyr det samme overalt på siden. Det er det tryggeste valget for skriftstørrelser, avstander, maksbredder og mellomrom i layouten.
em viser til skriftstørrelsen i selve elementet (for font-size er det det overordnede elementet). Den forplanter seg: en liste på 0,9em som er nøstet tre ganger, ender på 0,9 × 0,9 × 0,9 = 73 % av basen. Det gjør em praktisk for ting som skal skalere med sin egen tekst (padding på en knapp, størrelsen på et ikon ved siden av en etikett) og risikabelt for global typografi.
Hvorfor rem er viktig for universell utforming
Mange hever standard skriftstørrelse i nettleserinnstillingene (for eksempel fra 16 til 20 eller 24 px) i stedet for å zoome på hver side. Størrelser skrevet i px ignorerer den innstillingen, mens størrelser i rem eller em følger den. Når du bruker rem til tekst og avstander, vokser hele layouten med leserens valg, noe som hjelper på WCAG 2.2 suksesskriterium 1.4.4 (endre tekststørrelse opptil 200 %).
Av samme grunn bør du unngå å sette html { font-size: 16px; } i px: bruk en prosentverdi (100%, eller 62.5% hvis du vil at 1rem skal være 10px), slik at brukerens innstilling fortsatt gjelder.
Hva CSS-konverteren endrer
Den erstatter tall etterfulgt av px i deklarasjoner med verdien delt på rotskriftstørrelsen. Den rører aldri kommentarer, strenger eller url()-verdier.
- Behold bredden på kanter og omriss i px:
border,border-*-width,outline,outline-offsetogcolumn-ruleforblir i px, slik at tynne linjer holder seg skarpe.border-radiuskonverteres fortsatt. - Behold 1px-verdier: alle verdier mellom −1px og 1px forblir som de er.
- Konverter media queries til em (16px som base): i
@media-betingelser viser rem og em alltid til nettleserens opprinnelige skriftstørrelse, aldri tilhtml-regelen din, så verktøyet deler på 16 og skriver em der, uansett rotstørrelse. Når alternativet er av, beholder media queries px.
Ofte stilte spørsmål
Hvor mange piksler er 1rem?
16 px som standard. Hvis stilarket ditt setter html { font-size: 62.5%; }, er 1rem = 10 px, og den vokser hvis brukeren hever nettleserens standard skriftstørrelse.
Er rem det samme som em?
Bare på elementer der det overordnede elementet bruker rotskriftstørrelsen. rem ser alltid på html-elementet, em ser på det overordnede elementet, så nøstede em-verdier ganges med hverandre.
Bør jeg konvertere kanter til rem?
Vanligvis ikke. En kant på 1px konvertert til 0,0625rem kan bli uskarp eller forsvinne på enkelte skjermer ved uvanlige skriftstørrelser. Derfor er alternativene for kanter og 1px slått på som standard.
Gjør sidezooming rem unyttig?
Nei. Nettleserens zoom skalerer px og rem likt, men innstillingen for standard skriftstørrelse skalerer bare relative enheter. Å støtte begge deler er en del av det å respektere leserens preferanser.
Blir CSS-en min sendt noe sted?
Nei. Konverteringen skjer helt og holdent i nettleseren din, og ingenting du limer inn, forlater enheten din.
Relaterte verktøy
- Sideforholdskalkulator Sideforholdskalkulator som forkorter bredde og høyde, endrer størrelse med samme proporsjoner, sammenligner 16:9, 4:3 og 21:9 og gir deg CSS-koden aspect-ratio.
- Fontkombinasjoner – forhåndsvis overskrift og brødtekst Forhåndsvis fontkombinasjoner for overskrifter og brødtekst med 20 fonter med åpen lisens, juster størrelse og linjehøyde, og kopier CSS-font-family.
- CSS-formaterer og -minifiserer Gjør rotete CSS ryddig med riktig innrykk, eller minifiser den med csso, og se størrelsen før og etter. Kjører i nettleseren din, ingenting lastes opp.
- Skyggegenerator (CSS box-shadow) Lag CSS-skygger med flere lag og direkte forhåndsvisning. Sett forskyvning, uskarphet, utvidelse, farge og dekkevne, prøv neumorphism og kopier koden.