Neidio i'r prif gynnwys
LibraTool logoLibraTool

Trawsnewidydd Pixel i REM am ddim

Trawsnewidwch rhwng px, rem, em, pt, vw, vh, a % gyda maint ffont sylfaen ffurfiadwy. Yn cynnwys tabl cyfeirio ar gyfer maint pixel cyffredin.

Yn gweithio all-lein ar ôl llwytho
1rem

Cyd-destun (yn effeithio ar rem/em/vw/vh/%)

Pob trosiad ar gyfer 16 px

Tocynau Tailwind agosaf (ar 16px gwraidd)

Meintiau picsel cyffredin → rem (wrth sylfaen 16px)

Trosi CSS glynedig

Defnyddiau cyffredin

  • PX i REM ar gyfer Datblygiad GweTrosi gwerthoedd picsel i unedau rem ar gyfer CSS graddadwy ac hygyrch. Gosodwch eich maint ffont sylfaenol a gwelwch ar unwaith yr holl werthoedd cyfatebol.
  • Unedau CSS ar gyfer Dylunio YmatebiolTrosi rhwng px, vw, vh a % i adeiladu cynlluniau sy'n ymateb yn iawn i wahanol feintiau sgrin ac orientiadau.
  • Trosi Manylebau Dylunio i Unedau CSSCyfieithwch werthoedd picsel Figma neu Sketch i unedau rem/em ar gyfer gweithredu CSS glân a graddadwy.
  • Tailwind CSS Cyfeirnod UnedDeallwch sut mae dosbarthiadau maint Tailwind CSS yn mapio i werthoedd picsel a rem ar gyfer gweithredu manwl.
  • Trosi Unedau CSS ar gyfer Taflenni Arddull ArgraffuTrosi rhwng px, pt a rem ar gyfer ymholiadau cyfrwng argraffu a CSS allbwn PDF.

Sut Mae'n Gweithio

Mae pob trosiad yn rhedeg yn gyfan gwbl yn eich porwr gan ddefnyddio injan rifyddeg wedi'i ysgrifennu â llaw heb ddibyniaethau. Mae'r offeryn yn trosi rhwng saith uned CSS (px, rem, em, pt, vw, vh, a %) drwy lwybro pob cyfrifiad drwy bicseli fel sylfaen gyffredin, gan gymhwyso rhaniad neu luosiad syml yn erbyn eich maint ffont gwraidd, maint ffont rhiant, neu ddimensiynau porthwydd wedi'u cyflunio.

  1. 1
    Gosodwch eich gwerthoedd cyd-destun
    Cyn trosi, rydych yn cyflunio'r pedwar rhif sy'n gwneud unedau CSS cymharol yn ystyrlon: maint ffont gwraidd (16px rhagosodedig, sef rhagosodiad y porwr), maint ffont elfen rhiant (ar gyfer trosiadau em a %), a lled ac uchder porthwydd (ar gyfer vw a vh). Dyma'r un gwerthoedd y byddai eich porwr yn eu defnyddio wrth ddatrys CSS ar amser rhedeg.
  2. 2
    Picsel fel y canolradd cyffredinol
    Mae'r trosydd yn galw toPixels() yn gyntaf i normaleiddio eich mewnbwn i gyfrif picsel amrwd — er enghraifft, mae 1.5rem yn dod yn 1.5 × baseFontPx, ac mae 50vw yn dod yn 0.5 × vpWidth. Yna mae fromPixels() yn rhannu'r cyfrif picsel hwnnw â'r ffactor priodol ar gyfer yr uned darged. Dangosir pob un o'r saith uned ar yr un pryd yn y tabl trosi.
  3. 3
    Chwilio tocyn Tailwind agosaf
    Ar ôl trosi, mae'r offeryn yn cyfrifo'r gwerth rem ac yn sganio dau dabl chwilio caledgodiedig — tri tocyn maint-ffont ar ddeg Tailwind (text-xs hyd text-9xl) a'i raddfa bylchau — gan ddod o hyd i'r cyfatebiaeth agosaf yn ôl pellter absoliwt. Mae arwydd = yn golygu bod y gwerth yn docyn union; mae ≈ yn golygu mai dyma'r frasamcan agosaf.
  4. 4
    Ailysgrifennu CSV swp drwy fynegiad rheolaidd
    Mae'r panel gludo-CSS yn derbyn testun CSS amrwd ac yn cymhwyso disodliad mynegiad rheolaidd: yn y modd px→rem mae'n cyfateb â phob tocyn px ac yn disodli'r rhan rifiadol â gwerth/baseFontPx + rem; yn y modd rem→px mae'n gwneud y gwrthwyneb. Dangosir cyfrif y disodliadau fel y gallwch wirio faint o werthoedd a ailysgrifennwyd.

Offer Cysylltiedig

📏

Trawsnewidydd Uned

Trosi rhwng unedau o hyd, pwysau, tymheredd, arwynebedd, cyfaint, a mwy.

Rhowch gynnig arni
📐

Generadur CSS clamp()

Cynhyrchwch werth CSS clamp() rhygl ar gyfer teipograffeg a bylchau cyfaneddol. Gosodwch faint min/max ac ystod porthiant, gweld rhagolwg byw, a chopïo'r CSS un-llinell.

Rhowch gynnig arni
🟦

Generadur CSS Grid

Dylunio CSS grid yn ddeiliadol — traciau, unedau a bylchau — ac copïo'r CSS a HTML a gynhyrchwyd.

Rhowch gynnig arni

Cwestiynau Cyffredin