Gratis Pixel til REM-konverter
Konverter mellem px, rem, em, pt, vw, vh og % med en konfigurerbar basis-skriftstørrelse. Inkluderer en referencetabel for almindelige pixel-størrelser.
Kontekst (påvirker rem/em/vw/vh/%)
Nærmeste Tailwind-tokens (ved 16px rod)
Almindelige pixelstørrelser → rem (ved 16px basis)
Konverter indsatset CSS
Almindelige anvendelser
- PX til REM til webudviklingKonverter pixelværdier til rem-enheder til skalerbar, tilgængelig CSS. Indstil din basisskriftstørrelse og få øjeblikkeligt alle tilsvarende værdier.
- CSS-enheder til responsivt designKonverter mellem px, vw, vh og % for at bygge layouts, der reagerer korrekt på forskellige skærmstørrelser og orienteringer.
- Konverter designspecifikationer til CSS-enhederOversæt Figma eller Sketch pixelværdier til rem/em-enheder til ren, skalerbar CSS-implementering.
- Tailwind CSS-enhedsreferenceForstå, hvordan Tailwind CSS-størrelsesklasser kortlægges til pixel- og rem-værdier til præcis implementering.
- Konverter CSS-enheder til udskriftsformatskabelonerKonverter mellem px, pt og rem til print-mediekildekoder og PDF-output CSS.
Sådan fungerer det
Alle konverteringer kører udelukkende i din browser med en håndskrevet regnemotor uden afhængigheder. Værktøjet konverterer mellem syv CSS-enheder (px, rem, em, pt, vw, vh og %) ved at lade hver beregning gå via pixels som fælles grundlag og anvende simpel division eller multiplikation med din angivne rodskriftstørrelse, forælderens skriftstørrelse eller viewportens mål.
- 1Angiv dine kontekstværdierFør konvertering angiver du de fire tal, der giver relative CSS-enheder mening: rodskriftstørrelse (standard 16px, som er browserens standard), forælderelementets skriftstørrelse (til em- og %-konverteringer) og viewportens bredde og højde (til vw og vh). Det er de samme værdier, din browser ville bruge ved fortolkning af CSS under kørsel.
- 2Pixel som universelt mellemledKonverteren kalder først toPixels() for at normalisere dit input til et råt antal pixels — for eksempel bliver 1.5rem til 1,5 × baseFontPx, og 50vw bliver til 0,5 × vpWidth. Derefter dividerer fromPixels() pixelantallet med den relevante faktor for målenheden. Alle syv enheder vises samtidig i konverteringstabellen.
- 3Opslag af nærmeste Tailwind-tokenEfter konverteringen beregner værktøjet rem-værdien og gennemsøger to faste opslagstabeller — Tailwinds tretten skriftstørrelsestokens (text-xs til text-9xl) og dens afstandsskala — og finder det nærmeste match efter absolut afstand. Et =-tegn betyder, at værdien er et præcist token; ≈ betyder, at det er den nærmeste tilnærmelse.
- 4Massevis omskrivning af CSS via regexPanelet til indsættelse af CSS modtager rå CSS-tekst og anvender en regex-udskiftning: i px→rem-tilstand matcher det hvert px-token og erstatter taldelen med value/baseFontPx + rem; i rem→px-tilstand gør det det modsatte. Antallet af udskiftninger vises, så du kan tjekke, hvor mange værdier der blev omskrevet.
Relaterede værktøjer
Enhedskonverter
Konverter mellem enheder for længde, vægt, temperatur, areal, volumen og mere.
CSS clamp()-generator
Generer en flydende CSS clamp()-værdi til responsiv typografi og afstand. Angiv min/max-størrelse og viewport-interval, se en liveforhåndsvisning og kopiér den ene linje CSS.
CSS Grid-generator
Design visuelt et CSS-grid — spor, enheder og mellemrum — og kopier det genererede CSS og HTML.