Omvandla px till rem

Så omvandlar du px till rem

1. Ställ in Rotens teckenstorlek (px). Den är 16 i alla stora webbläsare om inte din stilmall ändrar den. Knapparna under fältet byter till 16 px, 10 px (tricket html { font-size: 62.5%; }) eller 18 px.
2. Om du arbetar med em ställer du in Förälderns teckenstorlek för em (px): den beräknade teckenstorleken för elementet som innehåller det element du stylar.
3. Under Omvandla ett värde skriver du i Pixlar (px), REM eller EM. De två andra fälten uppdateras medan du skriver, och raden under visar divisionen som används.
4. Omvandlingstabell listar vanliga storlekar. Ersätt Pixelvärden med dina egna designtokens (avståndsskala, typografisk skala …) och använd Kopiera tabell för att klistra in resultatet i ett kalkylblad eller ett designdokument. Eftersom kommatecken skiljer värdena åt skriver du decimaler med punkt i listan, till exempel 0.5.
5. För att migrera befintlig kod klistrar du in den i CSS att omvandla, väljer alternativen och klickar på Omvandla px till rem. Läs in ett exempel visar en liten stilmall. Kopiera Omvandlad CSS med Kopiera.

Formlerna

• rem = px ÷ rotens teckenstorlek. Med standardvärdet 16 px blir 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ förälderns teckenstorlek. I en rubrik på 20 px blir 10px = 0,5em.
• px = rem × rotens teckenstorlek, och px = em × förälderns teckenstorlek.

I CSS-koden skrivs decimaler alltid med punkt (1.5rem), oavsett språk.

rem eller em: vilken ska jag använda?

rem (”root em”) syftar alltid på teckenstorleken för html-elementet, så 1.5rem betyder samma sak överallt på sidan. Det är det säkraste valet för teckenstorlekar, avstånd, maxbredder och mellanrum i layouten.

em syftar på elementets egen teckenstorlek (för font-size förälderns). Värdena multipliceras: en lista på 0,9em som är nästlad tre gånger hamnar på 0,9 × 0,9 × 0,9 = 73 % av basen. Det gör em praktiskt för sådant som ska skalas med sin egen text (padding i en knapp, storleken på en ikon bredvid en etikett) men riskabelt för global typografi.

Därför är rem viktigt för tillgängligheten

Många höjer standardstorleken för text i webbläsarens inställningar (till exempel från 16 till 20 eller 24 px) i stället för att zooma varje sida. Storlekar i px ignorerar den inställningen; storlekar i rem eller em följer den. Med rem för text och avstånd växer hela layouten med läsarens val, vilket hjälper dig att uppfylla framgångskriterium 1.4.4 i WCAG 2.2 (ändra textstorlek upp till 200 %).

Av samma skäl bör du undvika att sätta html { font-size: 16px; } i px: använd en procentsats (100%, eller 62.5% om du vill att 1rem = 10px) så att användarens inställning fortfarande gäller.

Vad CSS-omvandlaren ändrar

Den ersätter tal som följs av px i deklarationer med värdet delat med rotens teckenstorlek. Den rör aldrig kommentarer, strängar eller url()-värden.

• Behåll bredd på border och outline i px: border, border-*-width, outline, outline-offset och column-rule stannar i px, så att tunna linjer förblir skarpa. border-radius omvandlas ändå.
• Behåll värden på 1px: alla värden mellan −1px och 1px lämnas som de är.
• Omvandla mediefrågor till em (bas 16px): i villkoren för @media syftar rem och em alltid på webbläsarens ursprungliga teckenstorlek, aldrig på din html-regel, så verktyget delar med 16 och skriver em där, oavsett din rotstorlek. När alternativet är avmarkerat behåller mediefrågorna sina px.