Fluid Spacing Clamp() -generaattori
Laske todellinen nestemäinen CSS-clamp()-arvo minimi- ja enimmäiskoosta kahdella näkymän leveydellä, jolloin kaltevuus ja leikkauspisteet näytetään vaiheittain ja koon muutoksen esikatselu.
Tulos
CSS clamp() toimii täsmälleen samalla tavalla välilyönnissä kuin kirjasinkoolla – ominaisuus vain sattuu olemaan marginaali, täyte tai väli fontin koon sijaan. Tämä sivu avaa laskimen 8–32 kuvapisteen alueella 320–1280 pikselin kuvaportissa. Tämä on yleinen vaihe osien täytteissä tai korttivälissä, jonka pitäisi tuntua tiukalta puhelimessa ja tilavalta työpöydällä ilman mediakyselyä.
Taustalla oleva matematiikka ei välitä siitä, mitä luvut edustavat: sama kaltevuus ja y-akselin leikkauskaava, joka tuottaa juoksevan otsikon koon, tuottaa nestevälin arvon, joten alla oleva erittely näyttää tarkalleen, kuinka 8px ja 32px muuttuvat kopiointivalmiiksi clamp() -riviksi täytetystä varten: clamp(...).
Vedä näkymän leveyden liukusäädintä esikatsellaksesi, miltä välit tuntuisivat millä tahansa leveydellä kahden taitepisteen välillä, säädä minimi- ja maksimiarvoja tiukemmalle tai löysemmälle alueelle ja kopioi valmis rivi suoraan mihin tahansa väliominaisuuteen.