CSS Clamp() -laskin

CSS clamp (MIN, PREFERRED, MAX) antaa yhden ilmoituksen korvata koko pinon mediakyselyjä: arvo pysyy MIN pienimmän näkymän alapuolella, MAX suurimman yläpuolella ja skaalautuu sujuvasti välillä. Vaikein osa on EDELLYTETTY termi – näkymän suhteellinen ilmaus, kuten 0,833rem + 0,833vw – jota kukaan ei halua johtaa käsin. Tämä laskin laskee sen todellisuudessa neljästä luvusta: vähimmäiskoko, enimmäiskoko ja katseluportin leveys, joihin kutakin sovelletaan.

Jokainen väliluku näytetään, ei vain viimeinen viiva: kaltevuus (kuinka monta kokoyksikköä arvo kasvaa kuvaportin pikseliä kohti), sama kaltevuus ilmaistuna vw-kertoimena ja y-akselin leikkaus — vakio, joka lisätään vw-termiin, jotta viiva kulkee täsmälleen määrittämiesi kahden pisteen läpi. Jokainen, joka on liittänyt clamp()-arvon opetusohjelmasta ymmärtämättä sitä, voi nähdä ja tarkistaa todellisen aritmeettisen täältä.

Näkymän leveyden liukusäädin ohjaa live-esikatseluruutua, joten nestemäinen skaalaus on näkyvissä, ei vain laskettuna: vedä se minimi- ja maksimikatkaisupisteiden väliin ja katso, että esimerkkitekstin koko muuttuu täsmälleen samalla tavalla kuin se muuttuisi oikean selainikkunan kokoa muuttaessa. Tulostusrivi ja erittelypäivitys jokaisella näppäinpainalluksella – tämä pariutuu luonnollisesti px to rem -muuntimen kanssa, kun myös peruskirjasinkoko on muutettava.

Vaihda tyyppimittakaavatilaan täydellistä nestetypografiajärjestelmää varten yhdessä vaiheessa: syötä peruskoko ja modulaarinen suhde (1,125 - 1,5) ja saat kuusi kokoa – pieni, pohja, h4, h3, h2 ja h1 – kukin lasketaan omana clamp()-viivana hellävaraisemman mobiilin etenemisen ja täyden työpöytäsuhteen välillä, valmiina kopioitavaksi mukautetun CSS-lohkon ominaisuuksina.