Fluid Value के लिए min(), max() और clamp()
min(), max() और clamp() shorthand से मानों को न्यूनतम और अधिकतम सीमा के बीच सीमित करना सीखिए।
Fluid Value के लिए min(), max() और clamp(), CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
तुलना फ़ंक्शन क्यों
CSS तुलना फ़ंक्शन (min(), max(), clamp()) मीडिया क्वेरी के बिना संदर्भ के अनुसार ढलने वाला प्रतिक्रियाशील आकार-निर्धारण संभव बनाते हैं — ब्रेकपॉइंट-आधारित तरीकों की तुलना में ये अधिक सुंदर और संक्षिप्त हैं।
min() — सबसे छोटा चुनें
min(a, b, ...) सभी आर्ग्युमेंट का मूल्यांकन करता है और सबसे छोटे का उपयोग करता है। यहाँ "न्यूनतम" दृश्य परिणाम को दर्शाता है — अर्थात सबसे अधिक सीमित विकल्प।
<div class="container">Container</div>max() — सबसे बड़ा चुनें
max(a, b, ...) सबसे बड़ा मान चुनता है — इससे न्यूनतम आधार हमेशा पूरा होता है।
<p>Responsive text</p>clamp(min, preferred, max)
clamp() किसी मान को एक सीमा के भीतर सीमित करता है। पसंदीदा मान (मध्य आर्ग्युमेंट) सामान्यतः प्रवाही होता है। min और max निश्चित सीमाएँ प्रदान करते हैं।
<h1>Clamped Heading</h1>clamp() का प्रवाही टाइपोग्राफी पैमाना
शीर्षक के प्रत्येक स्तर के लिए एकल clamp() का उपयोग करके कई ब्रेकपॉइंट ओवरराइड को बदलें:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>clamp() का प्रवाही अंतराल
padding, margin और gap पर भी प्रवाही आकार-निर्धारण लागू करें — यह "अंतर्निहित" डिज़ाइन की प्रमुख तकनीक है:
<div class="section">
<div class="grid"><div>A</div><div>B</div></div>
</div>चौड़ाई की सीमा के लिए min()
सबसे साफ़ कंटेनर पैटर्न: हमेशा व्यूपोर्ट का 90% रहे, लेकिन 1200px से अधिक चौड़ा न हो — वह भी एक ही व्यंजक से:
<div class="wrapper">Wrapper</div>न्यूनतम फ़ॉन्ट आकार के लिए max()
सुनिश्चित करें कि छोटे व्यूपोर्ट पर मुख्य पाठ कभी बहुत छोटा न हो:
<p class="text-body">Body text that never gets too small.</p>min/max/clamp को नेस्ट करना
जटिल सीमाओं के लिए इन फ़ंक्शन को नेस्ट किया जा सकता है:
<div class="element">Padded element</div>Grid में तुलना फ़ंक्शन
अधिक सुरक्षित कॉलम न्यूनतम सीमा के लिए minmax() के भीतर min() का उपयोग करें:
<div class="grid"><div>Card</div></div>ब्राउज़र समर्थन
तीनों तुलना फ़ंक्शन आधुनिक ब्राउज़र में पूरी तरह समर्थित हैं (Chrome 79+, Firefox 75+, Safari 11.1+)। किसी विक्रेता उपसर्ग की आवश्यकता नहीं है।
त्वरित जाँच
किसी शीर्षक में font-size: clamp(1rem, 3vw, 2.5rem) का उपयोग किया गया है। 3vw किस व्यूपोर्ट चौड़ाई पर 1rem के बराबर होगा (16px के रूट को मानते हुए)?
पुनरावलोकन
min() छोटा मान चुनता है (ऊपरी सीमा)। max() बड़ा मान चुनता है (निचली सीमा)। clamp(min, preferred, max) किसी प्रवाही मान को सीमित करता है। साथ मिलकर ये मीडिया क्वेरी के बिना प्रवाही टाइपोग्राफी और अंतराल को सक्षम बनाते हैं। सबसे शक्तिशाली पैटर्न: अपने-आप प्रतिक्रियाशील शीर्षकों के लिए clamp(1.5rem, 4vw, 3rem)।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “Fluid Value के लिए min(), max() और clamp()” पाठ निःशुल्क है?
हाँ—“Fluid Value के लिए min(), max() और clamp()” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Fluid Value के लिए min(), max() और clamp()” में मैं क्या सीखूँगा?
min(), max() और clamp() shorthand से मानों को न्यूनतम और अधिकतम सीमा के बीच सीमित करना सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“Fluid Value के लिए min(), max() और clamp()” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- गतिशील गणना के लिए calc()
- Fluid Value के लिए min(), max() और clamp()
- Grid में repeat() और minmax()
- color-mix() और Relative Color Syntax