Olùyí Pixel sí REM Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Gbogbo ìyípadà ń ṣiṣẹ́ pátápátá nínú aṣàwákiri rẹ pẹ̀lú ẹ́ńjìnnì ìṣírò tí a fi ọwọ́ kọ tí kò ní ìgbẹ́kẹ̀lé lórí ohunkóhun mìíràn. Irinṣẹ́ náà ń yí padà láàrin àwọn ọ̀nà CSS méje (px, rem, em, pt, vw, vh, àti %) nípa fífi ìṣírò kọ̀ọ̀kan la pixel kọjá gẹ́gẹ́ bí ìpìlẹ̀ kan, tí ó ń fi pípín tàbí ìpọ̀sí lásán sílo lòdì sí ìwọ̀n fóńtì gbòngbò, ìwọ̀n fóńtì òbí, tàbí àwọn àbùkù viewport tí o ti ṣètò.

1. 1
   Ṣètò àwọn iye àyíká rẹ

   Kí ìyípadà tó ṣẹlẹ̀, o ń ṣètò àwọn nọ́mbà mẹ́rin tí ó ń mú àwọn ọ̀nà CSS ìbátan ní ìtumọ̀: ìwọ̀n fóńtì gbòngbò (déédéé 16px, èyí tí ó jẹ́ déédéé aṣàwákiri), ìwọ̀n fóńtì ẹ̀yà òbí (fún ìyípadà em àti %), àti ìbú àti gíga viewport (fún vw àti vh). Àwọn iye kan náà ni aṣàwákiri rẹ yóò lò nígbà tí ó bá ń yanjú CSS ní àsìkò-ìṣiṣẹ́.
2. 2
   Pixel gẹ́gẹ́ bí àárín àpapọ̀

   Olùyípadà náà ń kọ́kọ́ pe toPixels() láti ṣe ìbáwọlé rẹ déédéé sí iye pixel gan-an — fún àpẹẹrẹ, 1.5rem di 1.5 × baseFontPx, 50vw sì di 0.5 × vpWidth. Nígbà náà fromPixels() ń pín iye pixel yẹn gbà ìwọ̀n tí ó tọ́ fún ọ̀nà àfojúsùn. A ń fi gbogbo ọ̀nà méje hàn ní àkókò kan náà nínú tábìlì ìyípadà náà.
3. 3
   Wíwá àmì Tailwind tí ó súnmọ́ jùlọ

   Lẹ́yìn ìyípadà, irinṣẹ́ náà ń ṣírò iye rem tí ó sì ń ṣàyẹ̀wò tábìlì ìtọ́ka tí a dá kalẹ̀ méjì — àwọn àmì ìwọ̀n-fóńtì mẹ́tàlá Tailwind (text-xs títí dé text-9xl) àti ìwọ̀n àyè rẹ̀ — tí ó ń rí ìbámu tí ó súnmọ́ jùlọ nípa ìjìnnà gan-an. Àmì = túmọ̀ sí pé iye náà jẹ́ àmì gan-an; ≈ túmọ̀ sí pé ó jẹ́ ìsúnmọ́ tí ó súnmọ́ jùlọ.
4. 4
   Ìtúnkọ CSS àkópọ̀ nípasẹ̀ regex

   Pátẹ́lì lẹ̀-CSS náà ń gba ọ̀rọ̀ CSS gan-an ó sì ń fi ìrọ́pò regex sílo: ní ipò px→rem ó ń bá àmì px kọ̀ọ̀kan mu ó sì ń rọ́pò apá nọ́mbà náà pẹ̀lú iye/baseFontPx + rem; ní ipò rem→px ó ń ṣe ìdàkejì. A fi iye ìrọ́pò hàn nítorí náà o lè fọwọ́sí iye mélòó tí a tún kọ.

Àwọn Irinṣẹ Tó Jọra