PX til REM-omregner

Sådan bruger du PX til REM-omregneren

1. Indstil Rodens skriftstørrelse (px). Den er 16 i alle større browsere, medmindre dit stylesheet ændrer den. Knapperne under feltet skifter til 16 px, 10 px (tricket html { font-size: 62.5%; }) eller 18 px.
2. Hvis du arbejder med em, angiver du Forælderens skriftstørrelse til em (px): den beregnede skriftstørrelse for det element, der indeholder det, du stiler.
3. Under Omregn en værdi skriver du i Pixel (px), REM eller EM. De to andre felter opdateres, mens du skriver, og linjen nedenunder viser den division, der er brugt.
4. Omregningstabel til mange værdier viser almindelige størrelser. Erstat Pixelværdier med dine egne designtokens (afstandsskala, skriftskala …), og brug Kopiér tabel til at indsætte resultatet i et regneark eller et designdokument.
5. For at migrere eksisterende kode indsætter du den i CSS, der skal omregnes, vælger indstillingerne og klikker på Omregn px til rem. Indlæs et eksempel viser et lille stylesheet. Kopiér Omregnet CSS med Kopiér.

Alt foregår i din browser. Intet, du indtaster eller indsætter, sendes til en server.

Formlerne

• rem = px ÷ rodens skriftstørrelse. Med standarden på 16 px er 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ forælderens skriftstørrelse. Inde i en overskrift på 20 px er 10px = 0,5em.
• px = rem × rodens skriftstørrelse, og px = em × forælderens skriftstørrelse.

rem eller em: hvilken skal jeg bruge?

rem (»root em«) refererer altid til skriftstørrelsen på html-elementet, så 1.5rem betyder det samme overalt på siden. Det er det sikreste valg til skriftstørrelser, afstande, maksimale bredder og mellemrum i layoutet.

em refererer til skriftstørrelsen på selve elementet (for font-size på forælderen). Den ophobes: en liste på 0,9em, der er indlejret tre gange, ender på 0,9 × 0,9 × 0,9 = 73 % af basen. Det gør em praktisk til ting, der skal skalere med deres egen tekst (padding på en knap, størrelsen på et ikon ved siden af en tekst) og risikabelt til global typografi.

Hvorfor rem betyder noget for tilgængelighed

Mange hæver standardskriftstørrelsen i deres browserindstillinger (for eksempel fra 16 til 20 eller 24 px) i stedet for at zoome ind på hver side. Størrelser skrevet i px ignorerer den præference, mens størrelser i rem eller em følger den. Når du bruger rem til tekst og afstande, kan hele layoutet vokse med læserens valg, og det hjælper med WCAG 2.2 succeskriterium 1.4.4 (ændring af tekststørrelse op til 200 %).

Af samme grund bør du undgå at sætte html { font-size: 16px; } i px: brug en procentsats (100%, eller 62.5%, hvis du vil have 1rem = 10px), så brugerens indstilling stadig gælder.

Hvad CSS-omregneren ændrer

Den erstatter tal efterfulgt af px i erklæringer med værdien divideret med rodens skriftstørrelse. Den rører aldrig kommentarer, strenge eller url()-værdier.

• Behold bredder på kanter og konturer i px: border, border-*-width, outline, outline-offset og column-rule forbliver i px, så tynde linjer forbliver skarpe. border-radius bliver stadig omregnet.
• Behold 1px-værdier: enhver værdi mellem −1px og 1px forbliver, som den er.
• Omregn media queries til em (16px som basis): i @media-betingelser refererer rem og em altid til browserens oprindelige skriftstørrelse, aldrig til din html-regel, så værktøjet dividerer med 16 og skriver em dér, uanset din rodstørrelse. Når valget er fjernet, beholder media queries deres px.