Liigu põhisisu juurde
LibraTool logoLibraTool

CSS clamp() generaator tasuta

Loo vedeliku CSS clamp() väärtus reageeriva tipograafia ja tühiku jaoks. Määra min/max suurus ja vaateava vahemik, vaata reaalajas eelvaadet ja kopeeri ühe rea CSS.

Töötab võrguühenduseta pärast laadimist
Väljundühik:
CSS-väärtus
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind klass
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px laiune → 21.9px
Aa 22px

Renderdatud suurus erinevatel vaateakentel

375px laiuneAa 16px
908px laiuneAa 24px
1440px laiuneAa 32px

clamp(min, preferred, max) skaleerib väärtuse vaateaknaga sujuvalt ja lukustub min ja max juures. See asendab meediapäringuvirnad tüpograafia, vahe ja laiuste jaoks ühe reaga.

Levinud kasutusviisid

  • Looge voolav reageeri tipograafiaSkaleerige fontide suurused sujuvalt mobiilis ja lauaarvutil ühe reaga.
  • Voolav piirid ja peenusTehke sektsiooni vahemaad kasvavad vaateportidega asemel poolitamisel.
  • Asendage meedia päringud clamp()-gaKokkukorras piirete ülekatte virnade ühe voolava väärtuse jaoks.
  • Looge vooluv tüüp skaalaLooge järjepidevad clamp() sammud disainisüsteemi tüübi skaalale.
  • Vooluv kangelane ja kuvari pealkirjadTehke suured kampaania sihtlehe pealkirjad drammaatiliselt, kuid turvaliselt skaleerida.

Kuidas see töötab

See tööriist arvutab CSS clamp() väärtused, kasutades käsitsi kirjutatud lineaarse interpoleerimise valemit — teeki ega serveri ida-tagasit pole. Sisestad kaks suurust ja kaks vaateakna laiust; matemaatika töötab koheselt sinu brauseris ning toodab kleepimisvalmis clamp() avaldise vw-põhise eelistatud väärtusega, mis skaleerib su tüüpi või vahet sujuvalt nende murdepunktide vahel.

  1. 1
    Lineaarse kalde arvutus
    Tööriist arvutab piksel-piksel kalde: (maxSuurus - minSuurus) / (maxVaateaken - minVaateaken). See kalle teisendatakse seejärel vw-ühikuteks 100-ga korrutades, mis on CSS vaateakna-suhtelise skaleerimise tuum.
  2. 2
    Lõikepunkti tuletamine
    Lõikepunkti nihe (px-des või rem-ides) arvutatakse nii, et lineaarne funktsioon tabab täpselt sinu minimaalset suurust minimaalse vaateakna juures. Koos moodustavad kalle ja lõikepunkt eelistatud väärtuse clamp() sees — osa, mis tegelikult skaleerub.
  3. 3
    Ühikuteisendus ja väljundivormindus
    Kui valid rem-väljundi, jagatakse iga pikselväärtus sinu konfigureeritud juurfondisuurusega (vaikimisi 16px) enne clamp() stringi kirjutamist. Toodetakse ka vastav Tailwindi suvaväärtuse klass, kus tühikud on asendatud alakriipsudega vastavalt Tailwindi süntaksile.
  4. 4
    Reaalajas vaateakna liuguri eelvaade
    Vahemikuliugur laseb sul liikuda 320px kuni 1920px laiuses. Igas positsioonis hindab sama kalde-lõikepunkti valem sulgu suurust reaalajas ja renderdab näidistekst selles arvutatud pikslisuuruses, nii et näed skaleerumiskäitumist enne mis tahes kopeerimist.

Seotud tööriistad

🟦

CSS Ruudustiku generaator

Kujundage visuaalselt CSS ruudustikku — rajad, ühikud ja vahed — ja kopeerige loodud CSS ja HTML.

Proovi järele
📐

Mis on minu ekraani resolutsioon

Vaata oma ekraani resolutsiooni CSS-i ja tegelikes pikslites, akna suurust, pikslitihedust, värvisügavust, HDR-i, puutetuge ja värskendussagedust ning kopeeri kõik.

Proovi järele
Populaarne
✍️

Allkirja looja

Joonista allkiri hiire, sõrme või pliiatsi abil, või kirjuta oma nimi käekirjafondiga, seejärel ekspordi see läbipaistva PNG- või SVG-failina.

Proovi järele

Korduma kippuvad küsimused