Pikselių į REM konverteris nemokamai
Konvertuokite tarp px, rem, em, pt, vw, vh ir % su konfigūruojamu pagrindiniu šrifto dydžiu. Apima įprastų pikselių dydžių nuorodų lentelę.
Kontekstas (veikia rem/em/vw/vh/%)
Artimiausi Tailwind žetonai (16px šaknyje)
Dažni pikselių dydžiai → rem (esant 16px bazei)
Konvertuoti įklijuotą CSS
Dažniausi naudojimo būdai
- PX iki REM žiniatinklio raidaiKonvertuokite pikselių vertes į rem vienetus teikiamam, prieinamam CSS. Nustatykite bazinį šrifto dydį ir iš kart pamatysite visas lygiavertes vertes.
- CSS vienetai atsargiems dizmamsKonvertuokite tarp px, vw, vh ir %, norėdami sukurti maketai, kurie tinkamai prisitaikytų prie skirtingų ekrano dydžių ir orientacijų.
- Konvertuokite dizaino specifikacijas į CSS vienetusIšverskite pikselių vertes iš Figma arba Sketch į rem/em vienetus grynai, keičiamą CSS realizavimą.
- Tailwind CSS vienetų nuorodaSupraskite, kaip Tailwind CSS dydžio klasės susieja pikselių ir rem vertes tiksliam įgyvendinimui.
- Konvertuokite CSS vienetus spausdintiems stilamsKonvertuokite tarp px, pt ir rem spausdintiems medijos užklausomis ir PDF CSS išėjimu.
Kaip tai veikia
Visi konvertavimai vyksta visiškai jūsų naršyklėje, naudojant rankomis parašytą aritmetinį variklį be jokių priklausomybių. Įrankis konvertuoja tarp septynių CSS vienetų (px, rem, em, pt, vw, vh ir %), nukreipdamas kiekvieną skaičiavimą per pikselius kaip bendrą pagrindą, taikydamas paprastą dalybą ar daugybą jūsų nustatytam šakniniam šrifto dydžiui, tėvinio elemento šrifto dydžiui ar srities matmenims.
- 1Nustatykite savo konteksto reikšmesPrieš konvertuojant, sukonfigūruojate keturis skaičius, kurie suteikia prasmę santykiniams CSS vienetams: šakninį šrifto dydį (numatytasis 16px, naršyklės numatytoji reikšmė), tėvinio elemento šrifto dydį (em ir % konvertavimui) bei srities plotį ir aukštį (vw ir vh). Tai tos pačios reikšmės, kurias jūsų naršyklė naudotų, spręsdama CSS vykdymo metu.
- 2Pikselis kaip universalus tarpinis vienetasKonverteris pirmiausia iškviečia toPixels(), kad normalizuotų jūsų įvestį į neapdorotą pikselių skaičių — pavyzdžiui, 1,5rem tampa 1,5 × baseFontPx, o 50vw tampa 0,5 × vpWidth. Tada fromPixels() padalija tą pikselių skaičių iš tinkamo daugiklio tiksliniam vienetui. Visi septyni vienetai vienu metu rodomi konvertavimo lentelėje.
- 3Artimiausio Tailwind žetono paieškaKonvertavus, įrankis apskaičiuoja rem reikšmę ir peržiūri dvi fiksuotas paieškos lenteles — Tailwind trylika šrifto dydžio žetonų (text-xs iki text-9xl) ir jo tarpų skalę — rasdamas artimiausią atitikimą pagal absoliutų atstumą. = ženklas reiškia, kad reikšmė yra tikslus žetonas; ≈ reiškia, kad tai artimiausias priartėjimas.
- 4Masinis CSS perrašymas per reguliariuosius reiškiniusĮklijuoti-CSS skydelis priima neapdorotą CSS tekstą ir taiko reguliariojo reiškinio pakeitimą: px→rem režime jis atitinka kiekvieną px žetoną ir skaitinę dalį pakeičia reikšme value/baseFontPx + rem; rem→px režime atlieka atvirkščiai. Rodomas pakeitimų skaičius, kad galėtumėte patikrinti, kiek reikšmių buvo perrašyta.
Susiję įrankiai
Matavimo vienetų konverteris
Konvertuokite tarp ilgio, svorio, temperatūros, ploto, tūrio ir kitų vienetų.
CSS clamp() generatorius
Generuokite dinamišką CSS clamp() reikšmę adaptyviai tipografijai ir tarpams. Nustatykite minimalų/maksimalų dydį ir ekrano dydžio diapazoną, peržiūrėkite gyvai ir nukopijuokite vienos eilutės CSS.
CSS tinklelio generatorius
Vizualiai sukurkite CSS tinklelį – takelius, vienetus ir tarpus – ir nukopijuokite sugeneruotą CSS ir HTML.