CSS clamp() 函数

定义和用法

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

clamp() ఫంక్షన్ మూడు పరామితులు కలిగి ఉంటుంది: కనిష్ట విలువ, ప్రాధాన్య విలువ మరియు గరిష్ట విలువ. ప్రాధాన్య విలువ నిర్దేశిత పరిధిలో ఉన్నట్లయితే, బ్రౌజర్ ప్రాధాన్య విలువను ఎంచుకుంటుంది; లేకపోతే, బ్రౌజర్ కనిష్ట విలువను లేదా గరిష్ట విలువను ఎంచుకుంటుంది.

ఉదాహరణ

ప్రతి <h1> మూలకం యొక్క కనిష్ట ఫాంట్ పరిమాణాన్ని 2rem గా, గరిష్ట ఫాంట్ పరిమాణాన్ని 3.5rem గా నిర్ధారించండి. అలాగే, <p> మూలకం యొక్క కనిష్ట ఫాంట్ పరిమాణాన్ని 1rem గా, గరిష్ట ఫాంట్ పరిమాణాన్ని 2.5rem గా నిర్ధారించండి:

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

స్వయంగా ప్రయత్నించండి

CSS సంకేతాలు

clamp(min, preferred, max)
విలువ వివరణ
min ఎంపికాత్మకం. అనుమతించిన కనిష్ట విలువను నిర్దేశించండి.
preferred అప్రమేయం. ప్రాధాన్య విలువను నిర్దేశించండి.
max ఎంపికాత్మకం. అనుమతించిన గరిష్ట విలువను నిర్దేశించండి.

సాంకేతిక వివరాలు

సంస్కరణం: CSS Values and Units Module Level 4

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ ఫంక్షన్ ను పూర్తిగా మద్దతు ఇస్తున్న మొదటి బ్రౌజర్ సంస్కరణను సూచిస్తాయి。

Chrome Edge Firefox Safari Opera
79 79 75 13.1 66