CSS clamp() generatorius nemokamai
Generuokite dinamišką CSS clamp() reikšmę adaptyviai tipografijai ir tarpams. Nustatykite minimalų/maksimalų dydį ir ekrano dydžio diapazoną, peržiūrėkite gyvai ir nukopijuokite vienos eilutės CSS.
Atvaizduojamas dydis skirtingose peržiūros srityse
clamp(min, preferred, max) sklandžiai pritaiko reikšmę pagal peržiūros sritį ir ją užfiksuoja ties min. ir maks. Pakeičia medijų užklausų rinkinius tipografijai, tarpams ir plotiams viena eilute.
Dažniausi naudojimo būdai
- Sukurkite skystą atsakingą tipografijąSklandžiai masteliuokite šrifto dydžius tarp mobiliojo ir darbalaukio viena eilute.
- Skystas paraštės ir užpildymasPadarykite skyrių pastatytos atsparumą rodyti užuot šokinimo per lūžius.
- Pakeiskite medijos užklausas clamp()Suglaudinkite lūžio nepaisymo krūvą į vieną skystą vertę.
- Sukurkite skystą tipo skalęSukurkite nuoseklius clamp() veiksmus dizaino sistemos tipo skalei.
- Skystoji herojus ir ekrano antraštėsPadarykite dideles kampanijos iškylimo antraštes dramatiškai, bet saugiai mastelyti.
Kaip tai veikia
Šis įrankis apskaičiuoja CSS clamp() reikšmes naudodamas rankomis parašytą tiesinės interpoliacijos formulę — jokių bibliotekų, jokio kreipimosi į serverį. Įvedate du dydžius ir du srities pločius; matematika akimirksniu vyksta jūsų naršyklėje ir sukuria paruoštą įklijuoti clamp() išraišką su vw pagrįsta pageidaujama reikšme, kuri sklandžiai keičia jūsų šrifto dydį ar tarpus tarp tų lūžio taškų.
- 1Tiesinio nuolydžio skaičiavimasĮrankis apskaičiuoja pikselis-per-pikselį nuolydį: (maksDydis - minDydis) / (maksSritis - minSritis). Šis nuolydis tada konvertuojamas į vw vienetus dauginant iš 100 — tai yra pagrindas, kaip veikia CSS srities santykinis mastelio keitimas.
- 2Poslinkio išvedimasPoslinkis (px ar rem vienetais) apskaičiuojamas taip, kad tiesinė funkcija tiksliai pasiektų jūsų minimalų dydį prie minimalaus srities pločio. Kartu nuolydis ir poslinkis sudaro pageidaujamą reikšmę clamp() viduje — dalį, kuri iš tikrųjų keičia mastelį.
- 3Vienetų konvertavimas ir išvesties formatavimasJei pasirenkate rem išvestį, kiekviena pikselio reikšmė padalijama iš jūsų nustatyto šakninio šrifto dydžio (numatytasis 16px), prieš įrašant į clamp() eilutę. Taip pat sukuriama atitinkanti Tailwind savavalės reikšmės klasė, kurioje tarpai pakeičiami pabraukimo brūkšneliais pagal Tailwind sintaksę.
- 4Gyva srities slankiklio peržiūraIntervalo slankiklis leidžia slinkti nuo 320px iki 1920px pločio. Kiekvienoje pozicijoje ta pati nuolydžio ir poslinkio formulė realiu laiku apskaičiuoja apribotą dydį ir atvaizduoja pavyzdinį tekstą tuo apskaičiuotu pikselių dydžiu, todėl galite pamatyti mastelio keitimo elgseną prieš ką nors kopijuodami.
Susiję įrankiai
CSS tinklelio generatorius
Vizualiai sukurkite CSS tinklelį – takelius, vienetus ir tarpus – ir nukopijuokite sugeneruotą CSS ir HTML.
Kokia mano ekrano skiriamoji geba
Pamatykite savo ekrano skiriamąją gebą CSS ir tikraisiais pikseliais, lango dydį, pikselių santykį, spalvų gylį, HDR, jutiklinio ekrano palaikymą ir atnaujinimo dažnį bei visa tai nukopijuokite.
Parašo kūrėjas
Nupieškite parašą pele, pirštu ar liestuku, arba įveskite savo vardą rankraščio šriftu, tada eksportuokite jį kaip skaidrų PNG arba SVG.