Gjenerues CSS clamp() Falas

Si funksionon

Ky mjet llogarit vlera CSS clamp() duke përdorur një formulë interpolimi linear të shkruar me dorë — pa biblioteka, pa udhëtime vajtje-ardhje te serveri. Vendos dy madhësi dhe dy gjerësi viewport-i; matematika funksionon menjëherë në shfletuesin tënd dhe prodhon një shprehje clamp() gati për ngjitje me një vlerë preferuese të bazuar në vw që shkallëzon fontin ose hapësirën tënde në mënyrë të butë mes atyre pikave ndarëse.

1. 1
   Llogaritje pjerrësie lineare

   Mjeti llogarit një pjerrësi piksel-për-piksel: (madhësiaMaks - madhësiaMin) / (viewportMaks - viewportMin). Kjo pjerrësi konvertohet pastaj në njësi vw duke u shumëzuar me 100, gjë që është thelbi i mënyrës si funksionon shkallëzimi CSS relativ ndaj viewport-it.
2. 2
   Nxjerrja e prerjes

   Një zhvendosje prerjeje (në px ose rem) llogaritet kështu që funksioni linear të bjerë saktësisht te madhësia jote minimale te viewport-i minimal. Së bashku, pjerrësia dhe prerja formojnë vlerën preferuese brenda clamp() — pjesa që në të vërtetë shkallëzohet.
3. 3
   Konvertim njësish dhe formatim dalje

   Nëse zgjedh daljen rem, çdo vlerë pikseli pjesëtohet me madhësinë tënde të konfiguruar të fontit rrënjë (e paracaktuar 16px) para se të shkruhet te vargu clamp(). Prodhohet gjithashtu një klasë përkatëse vlere arbitrare Tailwind, me hapësirat e zëvendësuara nga nënvija sipas sintaksës së Tailwind.
4. 4
   Parashikim i drejtpërdrejtë me rrëshqitës viewport-i

   Një rrëshqitës intervali të lejon të lëvizësh nga 320px deri 1920px gjerësi. Në çdo pozicion e njëjta formulë pjerrësie-dhe-prerjeje vlerëson madhësinë e kufizuar në kohë reale dhe vizaton tekst mostër në atë madhësi piksel të llogaritur, kështu që mund ta shohësh sjelljen e shkallëzimit para se të kopjosh diçka.

Mjete të ngjashme