CSS clamp() -laskuri

Syötä koko pienille ja suurille näytöille ja saat joustavan clamp()-arvon, joka skaalautuu sujuvasti niiden välillä – sopii fonttikoille, sisällyksille tai väleille.

Koot
Minimi
Maksimi
clamp()-arvo
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Tuloksessa säilytetään rem-osa keskimmäisessä termissä, jotta teksti suurenee edelleen, kun käyttäjä zoomaa 200 %:iin – pelkkää viewport-yksikköä käyttävä arvo ei tekisi niin.

Esikatselu

Joustava teksti, juuri oikean kokoisena.

Muotoile arvoa säätämällä kokoja ja näytön leveyksiä.

Laskenta tapahtuu kokonaan selaimessasi. Mitään syöttämiäsi tietoja ei lähetetä BroBroGo-palveluun.

UKK

Miten laskuri muodostaa clamp()-arvon?

Määrität kaksi pistettä: koon pienellä näytön leveydellä ja koon suurella näytön leveydellä. Laskuri muodostaa suoran viivan niiden välille, jotta koko kasvaa tasaisesti näytön levenemisen myötä, ja käärii sen clamp()-funktioon. Näin koko ei koskaan laske pienen näytön koon alle tai ylitä suuren näytön kokoa. Näiden kahden leveyden välillä koko skaalautuu joustavasti; niiden ulkopuolella se pysyy lähimmässä rajassa.

Miksi tulos on rem- ja vw-yksiköissä pikseleiden sijaan?

Rajat ovat rem-yksiköissä ja muuttuva keskiosa säilyttää rem-komponentin, jotta teksti kasvaa edelleen, kun lukija zoomaa tai suurentaa selaimensa oletusfonttikokoa – pelkkä pikseli- tai viewport-arvo voi estää tämän toiminnan. Kirjoitat koot pikseleinä, koska useimmat ajattelevat niitä niin, ja työkalu muuntaa ne rem-yksiköiksi käyttäen juuren fonttikokoa.

Voinko käyttää tätä muuhunkin kuin fonttikokoihin, kuten väleihin?

Kyllä. Sama arvo toimii sisällyksille (padding), ulkoväleille (margin), raoille (gap), leveydelle tai korkeudelle – missä tahansa, missä käytetään pituutta. Vaihda esikatselutilaksi "Laatikko" nähdäksesi välin kasvun tekstin sijaan. Jos pieni ja suuri kokosi ovat samat, tulos supistuu tavalliseksi kiinteäksi pituudeksi, koska skaalattavaa ei ole.

Tukevatko kaikki selaimet clamp()-funktiota?

Kyllä – kaikki nykyiset selaimet ovat tukeneet clamp()-funktiota vuodesta 2020 lähtien, joten voit käyttää arvoa sellaisenaan ilman varajärjestelmiä. Erittäin suurella maksimikoolla tai nopealla muutosnopeudella kannattaa kuitenkin tarkistaa 200 %:n zoomauksella, että teksti suurenee edelleen sitä tarvitseville lukijoille.

CSS Cubic Bezier -generaattoriMuotoile kevennyskäyrää vetämällä kahta kahvaa, seuraa pisteen liikettä suhteessa tasaisen nopeaan ja kopioi cubic-bezier()-arvo.Box Shadow -generaattoriSäädä laatikon varjoa liukusäätimillä, pinoa tasoja syvyyden luomiseksi ja kopioi valmis CSS-koodi heti.Liukuväri-generaattoriLuo lineaarinen, säteittäinen tai kartiomainen liukuväri, lisää väripisteitä ja aseta suunta, ja kopioi sitten CSS yhdellä klikkauksella.Border Radius -generaattoriPyöristä kulmat liukusäätimillä, luo orgaanisia muotoja elliptisellä tilalla ja kopioi CSS-koodi heti.Flexbox-generaattoriMääritä flex-säiliö ja sen elementit visuaalisilla ohjaimilla, seuraa asettelun muutoksia reaaliajassa ja kopioi CSS yhdellä klikkauksella.CSS Grid -generaattoriMääritä sarakkeet ja rivit, vedä solujen yli sijoittaaksesi elementtejä ja kopioi grid-CSS sekä vastaava HTML yhdellä klikkauksella.CSS-muotoilija ja -minifoijaSisennä sekava CSS helposti luettavaksi tai minifoi se julkaisua varten – mukana turvallinen tila, joka säilyttää sääntöjen järjestyksen.px / rem / em -muunninMuunna px-, rem- ja em-yksiköiden välillä käyttäen omaa juuren ja kontekstin fonttikokoa – muokkaa mitä tahansa kenttää, ja kaksi muuta päivittyvät reaaliajassa.