Olùmúdásílẹ̀ CSS clamp() Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Irinṣẹ́ yìí ń ṣírò àwọn iye CSS clamp() ní lílo fọ́rmúlà interpolation pípé tí a fi ọwọ́ kọ — kò sí ìwé-ìṣirò, kò sí ìrìnrìn sáfà. O tẹ ìwọ̀n méjì àti ìbú viewport méjì; ìṣírò náà ń ṣiṣẹ́ lẹ́sẹ̀kẹsẹ̀ nínú aṣàwákiri rẹ ó sì ń mú gbólóhùn clamp() tí ó ti ṣetán láti lẹ̀ pẹ̀lú iye tí a fẹ́ràn tí ó gbé lé vw tí ó ń fẹ̀ orí ìwé rẹ tàbí àyè rẹ dán-mọ́rán láàrin àwọn ààlà yẹn.

1. 1
   Ìṣírò ìlà tààrà

   Irinṣẹ́ náà ń ṣírò ìlà pixel-fún-pixel: (maxSize - minSize) / (maxViewport - minViewport). A sì ń yí ìlà yìí padà sí àwọn ọ̀nà vw nípa fífi 100 sílo, èyí tí ó jẹ́ àárín bí ìwọ̀n-ìbátan-viewport CSS ṣe ń ṣiṣẹ́.
2. 2
   Ìṣírò ìdásí

   A ń ṣírò ìdásí kan (ní px tàbí rem) kí iṣẹ́ tààrà náà lè kan ìwọ̀n rẹ tí ó kéré jùlọ gan-an ní viewport tí ó kéré jùlọ. Papọ̀, ìlà àti ìdásí ń kó iye tí a fẹ́ràn nínú clamp() jọ — apá tí ó ń dán-mọ́rán gan-an.
3. 3
   Ìyípadà ọ̀nà àti àgbékalẹ̀ ìtọjade

   Bí o bá yan ìtọjade rem, a ń pín iye pixel kọ̀ọ̀kan gbà ìwọ̀n fóńtì gbòngbò tí o ti ṣètò (déédéé 16px) kí ó tó kọ sínú ọ̀wọ́ ọ̀rọ̀ clamp() náà. A tún ń mú kíláàsì iye-àṣàrò Tailwind tí ó bára mu jáde, pẹ̀lú àyè tí a rọ́pò pẹ̀lú underscore gẹ́gẹ́ bí gírámà Tailwind.
4. 4
   Àkíyèsí ìtọ́ka viewport láàyè

   Ìtọ́ka àyè kan jẹ́ kí o gbé láti 320px sí 1920px ní ìbú. Ní ipò kọ̀ọ̀kan fọ́rmúlà ìlà-àti-ìdásí kan náà ń dánwò ìwọ̀n clamped ní àkókò gidi ó sì ń fi ọ̀rọ̀ àpẹẹrẹ hàn ní ìwọ̀n pixel tí a ṣírò yẹn, nítorí náà o lè rí ìwà dán-mọ́rán náà kí o tó dàkọ ohunkóhun.

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