CSS-enhetsomvandlare

Vad CSS-enhetsomvandlaren gör

CSS-enhetsomvandlaren översätter värden mellan px, rem, em och pt med justerbara basstorlekar. Den är användbar när du för över en design token till CSS, kontrollerar typografiska skalor, konverterar en gammal stilmall, jämför utskriftsorienterade punktvärden eller avgör om en komponent ska använda rotrelativa eller elementrelativa storlekar. Ange ett källvärde, välj dess enhet, ställ in teckenstorlekarna för rot och element så uppdateras motsvarande värden direkt. Omvandlaren behandlar rem som relativt till rotens teckenstorlek och em som relativt till det aktuella elementets teckenstorlek.

Omvandlingen mellan pixlar och punkter använder CSS-förhållandet där en punkt är en och en tredjedels pixel, så en pixel motsvarar 0,75 punkter. Att visa alla motsvarigheter samtidigt gör det lättare att se om en avstånds- eller teckenstorlekstoken stämmer med resten av en skala. Kopieringsknappen skapar en kompakt sammanfattning på flera rader för anteckningar, pull requests eller tokengranskningar.

Privat arbetsflöde i webbläsaren

All bearbetning sker i din webbläsare med JavaScript på klientsidan. Verktyget laddar inte upp kodstycken, konfigurationsvärden, genererade data, frågetexter eller kopierade exempel till någon server och kräver inget konto. Den enbart lokala modellen är viktig för utvecklarverktyg eftersom innehållet som klistras in ofta liknar verkliga applikationsdata: API-svar, loggar, exempel som liknar miljövariabler, databasfrågor, markup från utkast eller värden kopierade från felsökning i produktion. Att hålla omvandlingen lokal minskar risken och gör interaktionen snabb, eftersom det inte finns någon nätverksfördröjning.

Gränssnittet är medvetet kompakt så att du kan klistra in indata, justera alternativ, granska utdata, kopiera den och gå tillbaka till din editor. Resultat bör ändå granskas innan de committas, delas offentligt eller används i ett produktionsflöde. Webbläsarverktyg är utmärkta för snabb granskning och förberedelse, men de kan inte känna till varje projektkonvention, dataklassificeringsregel eller applikationsspecifikt valideringskrav.

Praktiska tips

Använd rem för värden som ska följa dokumentets rot, till exempel tillgängliga teckenstorlekar och layoutavstånd kopplade till användarens inställningar. Använd em när ett värde ska skala med komponentens egen teckenstorlek, till exempel vid ikonjustering, lokal utfyllnad eller nästlad typografi. Använd px med eftertanke för exakta kantlinjer, rastergrafik och fall där relativ skalning inte önskas. Verkliga beräknade storlekar kan påverkas av webbläsarinställningar, arv, zoom, media queries och containerspecifika stilar, så verifiera viktiga värden i utvecklarverktygen.