CSS clamp() -generaattori ilmaiseksi
Luo sujuva CSS clamp() -arvo responsiiviselle typografialle ja välistykselle. Aseta minimi/maksimikoko ja näyttöporttiala, katso live-esikatselu ja kopioi yksirivinen CSS.
Renderöity koko eri viewporteissa
clamp(min, preferred, max) skaalaa arvon sujuvasti viewportin mukaan ja lukittuu sitten minimiin ja maksimiin. Se korvaa media query -pinot typografialle, välistykselle ja leveydelle yhdellä rivillä.
Yleiset käyttötavat
- Luo Nesteytettävä Responsive TypografiaSkaalaa kirjasinpäät saumattomasti mobiili- ja työpöytäversion välillä yhdellä rivillä.
- Nesteytettävät Marginaalit ja VälistysSaa osion välistys kasvamaan näkymäikkunan kanssa hypättämisen sijaan lähtökohdissa.
- Korvaa Mediakyselyt clamp() -funktiollaRomahduta lähtökohtien ohitusten pinot yhdeksi nesteytettävän arvoksi.
- Rakenna Nesteytettävä TyyppiasteikkoLuo johdonmukaiset clamp() -vaiheet suunnittelujärjestelmän tyyppiasteikolla.
- Nesteytettävä Sankarit ja Näytön OtsikotSkaalaa suuret aloitussivujen otsikot dramaattisesti mutta turvallisesti.
Miten se toimii
Tämä työkalu laskee CSS clamp()-arvoja käsin kirjoitetulla lineaarisella interpolointikaavalla — ei kirjastoja, ei palvelinkierroksia. Annat kaksi kokoa ja kaksi näyttöleveyttä; laskenta tapahtuu välittömästi selaimessasi ja tuottaa valmiin liitettävän clamp()-lausekkeen vw-pohjaisella halutulla arvolla, joka skaalaa fonttikokosi tai välistyksesi sulavasti näiden katkaisukohtien välillä.
- 1Lineaarisen kulmakertoimen laskentaTyökalu laskee pikseli-pikseliltä-kulmakertoimen: (maksimikoko - minimikoko) / (maksiminäyttö - minimnäyttö). Tämä kulmakerroin muunnetaan sitten vw-yksiköiksi kertomalla 100:lla, mikä on CSS:n näyttöikkunasuhteisen skaalauksen ydin.
- 2Vakioarvon johtaminenVakioarvon siirtymä (px tai rem) lasketaan niin, että lineaarinen funktio osuu tarkalleen minimikokoosi minimileveydellä. Yhdessä kulmakerroin ja vakioarvo muodostavat clamp()-lausekkeen sisällä olevan halutun arvon — osan, joka todella skaalautuu.
- 3Yksikkömuunnos ja tulosteen muotoiluJos valitset rem-tulosteen, jokainen pikseliarvo jaetaan asettamallasi juurifonttikoolla (oletus 16px) ennen clamp()-merkkijonoon kirjoittamista. Vastaava Tailwind-mielivaltaisarvoluokka tuotetaan myös, välilyönnit korvattuina alaviivoilla Tailwindin syntaksin mukaisesti.
- 4Suora näyttöikkunaliukusäätimen esikatseluAlueliukusäädin antaa sinun liu'uttaa 320px:stä 1920px:iin leveydellä. Jokaisessa kohdassa sama kulmakerroin- ja vakioarvokaava laskee rajatun koon reaaliajassa ja piirtää esimerkkitekstiä sillä lasketulla pikselikoolla, joten näet skaalauskäyttäytymisen ennen kuin kopioit mitään.
Liittyvät työkalut
CSS-verkon generaattori
Suunnittele CSS-verkkoa visuaalisesti — raidat, yksiköt ja aukot — ja kopioi luotu CSS ja HTML.
Mikä on näytön resoluutioni
Näe näyttösi resoluutio CSS- ja todellisina pikseleinä, ikkunan koko, pikselisuhde, värisyvyys, HDR, kosketustuki ja virkistystaajuus, ja kopioi kaikki.
Allekirjoituksen tekijä
Piirrä allekirjoitus hiirellä, sormella tai kynällä, tai kirjoita nimesi käsialafontilla, ja vie se sitten läpinäkyvänä PNG- tai SVG-tiedostona.