फ़ंक्शन clamp
फ़ंक्शन clamp तीन पैरामीटर लेता है: न्यूनतम मान, वरीय मान और अधिकतम मान।
यह लौटाता है:
- न्यूनतम मान, यदि वरीय मान न्यूनतम से कम है
- अधिकतम मान, यदि वरीय मान अधिकतम से अधिक है
- वरीय मान, यदि यह न्यूनतम और अधिकतम के बीच स्थित है
सिंटैक्स
सिलेक्टर {
प्रॉपर्टी: clamp(न्यूनतम, वरीय, अधिकतम);
}
उदाहरण . ब्लॉक के आकार को सीमित करना
निम्नलिखित उदाहरण में ब्लॉक का वरीय
आकार स्क्रीन की चौड़ाई का 30% होगा।
लेकिन 100px से छोटा और 300px से बड़ा
यह नहीं हो सकेगा:
<div id="con1"></div>
<div id="targ"></div>
<div id="con2"></div>
#targ {
width: clamp(100px, 30%, 300px);
height: 100px;
border: 1px solid red;
margin: 30px auto;
}
#con1 {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 30px auto;
}
#con2 {
width: 300px;
height: 100px;
border: 1px solid black;
margin: 30px auto;
}
:
उदाहरण . रिस्पॉन्सिव फ़ॉन्ट आकार
निम्नलिखित उदाहरण में वरीय
फ़ॉन्ट आकार 4vw होगा।
लेकिन 16px से छोटा और 32px से बड़ा
यह नहीं हो सकेगा:
<p id="con1">
responsive text example
</p>
<p id="elem">
responsive text example
</p>
<p id="con2">
responsive text example
</p>
#elem {
font-size: clamp(16px, 4vw, 32px);
color: red;
}
#con1 {
font-size: 16px;
}
#con2 {
font-size: 32px;
}
:
उदाहरण . रिस्पॉन्सिव बॉर्डर रेडियस
निम्नलिखित उदाहरण में वरीय
बॉर्डर रेडियस 3vw होगा।
लेकिन 5px से छोटा और 20px से बड़ा
यह नहीं हो सकेगा:
<div id="con1"></div>
<div id="elem"></div>
<div id="con2"></div>
div {
width: 100px;
height: 100px;
margin: 20px auto;
background: lightblue;
}
#elem {
border-radius: clamp(5px, 3vw, 20px);
background: #efafc6;
}
#con1 {
border-radius: 5px;
}
#con2 {
border-radius: 20px;
}
:
