Kyauta Mai Ƙirƙirar CSS clamp()
Ƙirƙiri ƙimar CSS clamp() mai sassauci don rubutu da tazara masu amsa. Saita girman min/max da zangon viewport, duba preview mai rai, ka kwafi layin CSS guda ɗaya.
Girman da aka nuna a viewport daban-daban
clamp(min, preferred, max) yana daidaita ƙima cikin sassauci tare da viewport, sannan ya kulle a mafi ƙaranci da mafi girma. Yana maye gurbin jerin media queries don rubutu, sarari, da faɗi da layi ɗaya kawai.
Yadda Yake Aiki
Wannan kayan aikin yana lissafta ƙimomin CSS clamp() ta amfani da ka'idar tsaka-tsaki na layi da aka rubuta da hannu — babu ɗakunan karatu, babu tafiya-zuwa-uwar garke. Kana shigar da girma biyu da faɗin duba biyu; lissafin yana gudana nan take a burauzarka kuma yana samar da wani harafin clamp() a shirye don manna tare da ƙima da aka fi so bisa vw wanda yake daidaita nau'inka ko sarari cikin santsi tsakanin waɗannan wuraren canji.
- 1Lissafin gangaren layiKayan aikin yana lissafta gangare pixel-a-pixel: (girmaMax - girmaMin) / (fadiDubaMax - fadiDubaMin). Ana canja wannan gangaren zuwa naúrorin vw ta ninka shi da 100, wanda shine ainihin yadda daidaita vw-mai-alaka da fadin duba na CSS take aiki.
- 2Samo interceptAna lissafta wani kashi na intercept (a px ko rem) don ka'idar layin ta kai daidai girmarka mafi ƙaranci a fadin duba mafi ƙaranci. Tare, gangare da intercept suna kafa ƙimar da aka fi so a cikin clamp() — sashin da yake ainihin daidaitawa.
- 3Canjawar naúra da tsarin fitarwaIdan ka zaɓi fitarwar rem, ana raba kowace ƙimar pixel da girman font na jagoranka da aka tsara (na asali 16px) kafin a rubuta shi zuwa harafin clamp(). Ana kuma samar da wani aji mai dacewa na Tailwind arbitrary-value, tare da fararen sarari an maye gurbinsu da underscores bisa syntax na Tailwind.
- 4Dubawar rayayyiyar mai zamewar fadin dubaWani mai zamewar zango yana barinka ka matsa daga 320px zuwa 1920px faɗi. A kowane matsayi iri ɗayan ka'idar gangare-da-intercept yana lissafta girman da aka danne a lokaci na gaskiya kuma yana zana rubutun samfur a wannan girman pixel da aka lissafta, don haka za ka iya ganin halayen daidaitawa kafin ka kwafi komai.
Kayan Aiki Masu Alaƙa
Mai Ƙirƙirar CSS Grid
Ƙirƙiri grid ɗin CSS ta hanyar gani — hanyoyi, raka'o'i da gibi — sannan ka kwafi CSS da HTML da aka ƙirƙira.
Mai Yin Sa Hannu
Zana sa hannu da linzamin kwamfutarka, yatsanka, ko alkalami, ko rubuta sunanka a rubutun hannu, sannan ka fitar da shi a matsayin PNG ko SVG mai bayyane.
Mai Canza Pixel zuwa REM
Canza tsakanin px, rem, em, pt, vw, vh, da % tare da girman font na asali da za a iya keɓancewa. Ya haɗa da tebur na tunani don girman pixel na yau da kullum.