Polecane kursy:

Funkcja CSS clamp()

Definicja i użycie CSS clamp() Funkcja służy do ustawienia wartości, która dostosowuje się automatycznie między minimalną a maksymalną wartością w zależności od rozmiaru viewport.

clamp() Funkcja ma trzy parametry: minimalna wartość, wartość preferowana i maksymalna wartość. Jeśli wartość preferowana znajduje się w określonym zakresie, przeglądarka wybierze wartość preferowaną; w przeciwnym razie, przeglądarka wybierze minimalną lub maksymalną wartość.

Przykład

Ustaw最小字体大小 <h1> na 2rem,最大字体大小 na 3.5rem. Jednocześnie ustaw最小字体大小 <p> na 1rem,最大字体大小 na 2.5rem:

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

Spróbuj sam

Gramatyka CSS

clamp(min, preferred, max)

Szczegóły techniczne

Obsługa przeglądarek

Tabela liczby oznaczają wersję przeglądarki, która w pełni obsługuje tę funkcję.