CSS clamp() -funktio

Määrittely ja käyttö

CSS:n clamp() Funktiota käytetään arvon asettamiseen, joka mukautuu näyttöalueen kokoon vähimmäismäärästä ja enimmäismäärään.

clamp() Funktiolla on kolme parametria: vähimmäismäärä, ensisijainen arvo ja enimmäismäärä. Jos ensisijainen arvo on määritetyn arvon sisällä, selain valitsee ensisijaisen arvon; muuten selain valitsee vähimmäismäärän tai enimmäismäärän.

Esimerkki

Aseta <h1>-elementin vähimmäiskirjasinkoko 2rem ja suurin kirjasinkoko 3.5rem. Samalla aseta <p>-elementin vähimmäiskirjasinkoko 1rem ja suurin kirjasinkoko 2.5rem:

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Kokeile itse

CSS Syntax

clamp(min, preferred, max)

Tekninen yksityiskohta

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.