Kyauta Mai Canza Pixel zuwa REM

Yadda Yake Aiki

Dukkan canjawoyi suna gudana gaba ɗaya a burauzarka ta amfani da injin lissafi da aka rubuta da hannu babu dogaro. Kayan aikin yana canjawa tsakanin naúrorin CSS bakwai (px, rem, em, pt, vw, vh, da %) ta hanyar tafiyar da kowane lissafi ta pixels a matsayin asali na gama-gari, yana amfani da rabawa ko ninkawa sauƙi a kan girman font na jagoranka, girman font na iyaye, ko daidaitawar viewport da ka tsara.

1. 1
   Saita ƙimomin mahallinka

   Kafin canjawa, kana tsara lambobi huɗu da suke sanya naúrorin CSS masu-alaka su ma'ana: girman font na jagora (na asali 16px, wanda shine na asali na burauza), girman font na abu na iyaye (don canjawar em da %), da fadi da tsayi na viewport (don vw da vh). Waɗannan iri ɗayan ƙimomi ne da burauzarka za ta yi amfani da su lokacin warware CSS a lokacin gudu.
2. 2
   Pixel a matsayin tsaka-tsaki na gama-gari

   Mai canjawar farko yana kiran toPixels() don daidaita shigarwarka zuwa ƙidayar pixel danye — misali, 1.5rem ta zama 1.5 × baseFontPx, kuma 50vw ta zama 0.5 × vpWidth. Sannan fromPixels() yana raba wannan ƙidayar pixel da daidai adadin naúrar manufa. Ana nuna dukkan naúrori bakwai lokaci guda a tebur na canjawa.
3. 3
   Neman alamar Tailwind mafi kusa

   Bayan canjawa, kayan aikin yana lissafta ƙimar rem kuma yana bincika teburan bincike guda biyu da aka rubuta kai tsaye — alamomin font-size goma-sha-uku na Tailwind (text-xs har zuwa text-9xl) da sikelinsa na sarari — yana gano dacewa mafi kusa ta nisa cikakke. Alamar = tana nufi ƙimar tana daidai alama; ≈ tana nufi ita ce mafi kusa.
4. 4
   Sake rubutun CSS ta yawa ta regex

   Panel na manna-CSS yana karɓar rubutun CSS danye kuma yana amfani da maye gurbin regex: a yanayin px→rem yana daidaita kowace alama ta px kuma yana maye gurbin sashin lamba da value/baseFontPx + rem; a yanayin rem→px yana yin akasin haka. Ana nuna ƙidayar maye gurbi don ka tabbatar da nawa ƙima aka sake rubutawa.

Kayan Aiki Masu Alaƙa