CSS Clamp() -laskuri

CSS clamp(MIN, PREFERRED, MAX) mahdollistaa yhden määrittelyn korvaavan koko joukon media queryjä: arvo pysyy MIN:issä pienimmän näkymän alapuolella, MAX:issa suurimman yläpuolella ja skaalautuu sulavasti niiden välillä. Vaikea osa on PREFERRED-termi — näkymäsuhteellinen lauseke kuten 0.833rem + 0.833vw — jota kukaan ei halua johtaa käsin. Tämä laskuri laskee sen todellisesta neljästä numerosta: minimikoko, maksimikoko ja näkymänleveys, jossa kumpikin pätee.

Jokainen välivaiheen numero näytetään, ei pelkkää lopullista riviä: kaltevuus (kuinka monta kokoyksikköä arvo kasvaa näkymäpikseliä kohden), tämä sama kaltevuus ilmaistuna vw-kertoimena, sekä y-akselin leikkauspiste — vakio, joka lisätään vw-termiin, jotta suora kulkee tarkalleen määrittämiesi kahden pisteen kautta. Kuka tahansa, joka on liittänyt clamp()-arvon ohjeesta sitä ymmärtämättä, voi nähdä ja tarkistaa todellisen laskutoimituksen tässä.

Näkymänleveyden liukusäädin ohjaa esikatselulaatikkoa, joten joustava skaalaus on nähtävissä, ei vain laskettavissa: vedä sitä minimi- ja maksimirajapisteiden välillä ja katso, kuinka näytetekstin koko muuttuu juuri niin kuin se muuttuisi oikeaa selainikkunaa muutettaessa. Tulostusrivi ja purku päivittyvät jokaisella näppäimenpainalluksella — tämä yhdistyy luontevasti px–rem-muuntimeen, kun itse perusfonttikoko tarvitsee myös muuntamista.

Vaihda tyyppiasteikkotilaan saadaksesi kokonaisen joustavan typografiajärjestelmän yhdellä askeleella: syötä peruskoko ja modulaarinen suhdeluku (1,125:stä 1,5:een) ja saat kuusi kokoa — small, base, h4, h3, h2 ja h1 — kukin laskettuna omana clamp()-rivinään loivemman mobiiliprogression ja täyden työpöytäsuhdeluvun välillä, kopioitavana CSS-muokattujen ominaisuuksien lohkona.