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.

Kirjoittanut ja tarkistanut BroBroGo-toimitustiimi.Päivitetty viimeksi:

Mikä on CSS clamp() -laskuri ja miten se toimii?

CSS clamp() -laskuri on työkalu, joka laskee CSS-koodissa käytettävän clamp()-funktion arvon. Tämän funktion avulla jokin tietty koko saadaan skaalautumaan sujuvasti minimi- ja maksimiarvon välillä eri näytön leveyksillä. Kun annat työkalulle koon pienelle näytölle ja koon suurelle näytölle, laskuri luo näiden tietojen pohjalta clamp()-funktion.

Tämä funktio varmistaa, ettei koko koskaan laske asettamasi pienen näytön koon alapuolelle tai nouse suuren näytön koon yläpuolelle. Näiden kahden ääripään välillä koko skaalautuu joustavasti näytön leveyden mukaan. Työkalua voidaan käyttää monipuolisesti erilaisten pituusominaisuuksien määrittämiseen, kuten fonttikokoihin, sisällyksiin (padding), ulkoväleihin (margin), rakoihin (gap), leveyteen tai korkeuteen.

Laskurin syötteet ja asetukset

Laskurin toiminta perustuu tarkkoihin syötteisiin, joiden avulla joustava skaalaus lasketaan. Työkalu odottaa kelvollisia lukuja jokaiseen syötekenttään. Laskuria varten tarvitaan seuraavat tiedot:

  • Minimi (Koko): Luku, joka edustaa haluttua kokoa pienellä näytön leveydellä.
  • Minimi (Näytön leveys): Luku, joka määrittää pienen näytön leveyden.
  • Maksimi (Koko): Luku, joka edustaa haluttua kokoa suurella näytön leveydellä.
  • Maksimi (Näytön leveys): Luku, joka määrittää suuren näytön leveyden.
  • Juuren fonttikoko (root): Luku, jota käytetään pikseliarvoina annettujen syötteiden muuntamiseen rem-yksiköiksi.

Työkalu muuntaa syötetyt pikseliarvot automaattisesti rem-yksiköiksi käyttäen annettua juuren fonttikokoa. Jotta laskenta toimii oikein, pienen näytön leveyden on oltava pienempi positiivinen luku kuin suuren näytön leveyden. Jos tämä ehto ei täyty, laskurin antama clamp()-arvo on — ja työkalu näyttää virheilmoituksen "Pienen näytön leveyden on oltava pienempi positiivinen luku kuin suuren näytön leveyden.".

Tulokset ja esikatselun tilat

Kun syötteet ovat kunnossa, laskuri tuottaa valmiin CSS-funktion ja tarjoaa työkaluja sen testaamiseen. Laskurin antamat tulokset ja tilatiedot ovat:

  • clamp()-arvo: Laskettu CSS clamp()-funktio, esimerkiksi muodossa clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
  • Esikatselu: Visuaalinen esitys siitä, miten koko skaalautuu. Esikatselutilaksi voidaan valita joko "Teksti" (jolloin näytetään esimerkkiteksti "Joustava teksti, juuri oikean kokoisena.") tai "Laatikko".
  • Esikatselun leveys: Numeerinen näyttö, joka osoittaa esikatselualueen senhetkisen leveyden.

Laskuri näyttää myös tilannekohtaisia tilaviestejä, jotka auttavat ymmärtämään arvon käyttäytymistä:

  • "Muotoile arvoa säätämällä kokoja ja näytön leveyksiä." (kun säädät arvoja).
  • "Käänteinen skaalaus – koko pienenee näytön kasvaessa." (jos koot on asetettu käänteisesti).
  • "Molemmat koot ovat samat, joten tämä on kiinteä arvo, ei joustava." (jos minimi- ja maksimikoot ovat yhtä suuret).
  • "rajoitettu minimiin" (kun esikatselun leveys alittaa minimirajan).
  • "rajoitettu maksimiin" (kun esikatselun leveys ylittää maksimirajan).
  • "skaalautuu joustavasti" (kun koko muuttuu aktiivisesti rajojen välillä).

Saavutettavuus ja yksiköiden merkitys

Yksi joustavan suunnittelun tärkeimmistä tavoitteista on varmistaa sivuston käytettävyys ja saavutettavuus kaikille käyttäjille. Laskurin tuottama clamp()-arvo on suunniteltu siten, että rajat ilmoitetaan rem-yksiköissä ja myös muuttuva keskiosa säilyttää rem-komponentin.

Tämä on kriittistä saavutettavuuden kannalta, sillä se varmistaa, että teksti suurenee edelleen silloin, kun käyttäjä käyttää selaimen zoomausta (esimerkiksi 200 %:iin) tai muuttaa selaimensa oletusfonttikokoa. Jos laskennassa käytettäisiin pelkkää viewport-yksikköä (kuten vw), teksti ei välttämättä suurenisi zoomauksen yhteydessä, mikä heikentäisi sivuston saavutettavuutta.

Tietosuoja ja tietojen käsittely

Laskurin käyttäminen on täysin turvallista. Kaikki laskenta tapahtuu kokonaan omassa selaimessasi, eikä mitään syöttämiäsi tietoja lähetetä BroBroGo-palveluun. Voit siis suunnitella ja laskea arvoja ilman huolta tietojesi siirtymisestä ulkopuolisille palvelimille.

Kenelle tämä työkalu on tarkoitettu?

Laskuri on hyödyllinen apuväline monissa erilaisissa web-kehityksen ja -suunnittelun tilanteissa. Työkalua tarvitsevat erityisesti:

  • Henkilöt, jotka suunnittelevat responsiivisia verkkosivujen asetteluja.
  • Kehittäjät, jotka haluavat luoda joustavaa typografiaa, joka mukautuu saumattomasti näytön koon mukaan.
  • Suunnittelijat, joiden täytyy toteuttaa responsiivisia välejä (kuten padding, margin tai gap), jotka mukautuvat eri näyttöjen leveyksiin.
  • Kehittäjät, jotka haluavat varmistaa sivuston saavutettavuuden sallimalla tekstin suurenemisen silloin, kun käyttäjä zoomaa sivua tai muuttaa selaimensa oletusfonttikokoa.

Usein kysytyt kysymykset (FAQ)

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.