CSS clamp() 函数

定义和用法

CSS 的 clamp() 函数用于设置一个值，该值会根据视口的大小在最小值和最大值之间自适应调整。

clamp() 函数有三个参数：最小值、首选值和最大值。如果首选值在指定范围内，浏览器会选择首选值；否则，浏览器会选择最小值或最大值。

实例

将

元素的最小字体大小设置为 2rem，最大字体大小设置为 3.5rem。同时，将

元素的最小字体大小设置为 1rem，最大字体大小设置为 2.5rem：

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

Sai kai sai

Tsare-tsare CSS

clamp(min, preferred, max)
Mutum Kira
min Na'ura. Tanda da ziyarar mafarka.
preferred Wajib. Tanda da kuma tura.
max Na'ura. Tanda da ziyarar mafi girma.

Kwararrabawar da labarin fasaha

Tasiri: CSS Values and Units Module Level 4

Yakiyar ajiya

Tabbinen kifanin ya bayan tashin hanyar ceenin za a yarda ba hanyar za a tsamaniya

Chrome Edge Firefox Safari Opera
79 79 75 13.1 66