CSS Academy · पाठ

गतिशील गणना के लिए calc()

गतिशील मानों के लिए calc() function से CSS में unit मिलाइए और arithmetic कीजिए।

पाठ 1, कुल 4 में से13 चरण

गतिशील गणना के लिए calc(), CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

calc() क्या है

calc() आपको CSS गुणधर्मों के मानों में सीधे अंकगणित करने देता है। आप एक ही गणना में अलग-अलग इकाइयों (px, %, rem, vw) को मिला सकते हैं।

calc() का मूल सिंटैक्स

यह जोड़ (+), घटाव (-), गुणा (*) और भाग (/) का समर्थन करता है। + और - ऑपरेटरों के आसपास रिक्त स्थान आवश्यक हैं।

  <div class="sidebar">Sidebar (100% - 240px)</div>

इकाइयों को मिलाना

calc() की सबसे बड़ी शक्ति उन असंगत इकाइयों को मिलाना है, जिन्हें अन्यथा मिलाना संभव नहीं होता:

  <div class="hero">Hero</div>
  <div class="column">Column</div>

CSS चरों के साथ calc()

गतिशील डिज़ाइन टोकन बनाने के लिए calc() को CSS के अनुकूलित गुणधर्मों के साथ मिलाएँ:

  <div class="main">Main content</div>

नेस्टेड calc()

calc() को नेस्ट किया जा सकता है, हालांकि इसकी आवश्यकता बहुत कम पड़ती है, क्योंकि प्रत्येक संदर्भ पहले ही गणितीय गणना कर लेता है:

  <div class="element">Element</div>

प्रवाही टाइपोग्राफी के लिए calc()

दो आकारों के बीच रैखिक प्रक्षेपण बनाने के लिए calc() का उपयोग करें:

  <h1>Fluid Heading</h1>

calc() में भाग

भाग देने के लिए भाजक ऐसी संख्या होना चाहिए, जिसमें कोई इकाई न हो:

  <div class="thirds">Third width</div>

Grid और Flexbox के साथ calc()

ट्रैक परिभाषाओं और flex-basis के भीतर उपयोगी:

  <div class="grid"><div>A</div><div>B</div></div>

calc() बनाम अन्य फ़ंक्शन

कब किसका उपयोग करें:

calc(): मनमाना अंकगणित, विशेषकर इकाइयों को मिलाने के लिए
min()/max(): विकल्पों में से छोटा या बड़ा चुनने के लिए
clamp(): किसी प्रवाही मान को न्यूनतम और अधिकतम के बीच सीमित करने के लिए

ब्राउज़र समर्थन

calc() सभी आधुनिक ब्राउज़र और IE11 में समर्थित है। यह सबसे व्यापक रूप से समर्थित CSS फ़ंक्शन में से एक है। किसी भी आधुनिक प्रोजेक्ट में फ़ॉलबैक के बिना इसका उपयोग करना सुरक्षित है।

calc() के सामान्य पैटर्न

वे व्यावहारिक पैटर्न, जिनका आप बार-बार उपयोग करेंगे:

  <div class="full-height">Full height minus header</div>
  <div class="half-minus-gap">Half minus gap</div>
  <div class="row"><div class="thirds-with-gaps">Third</div></div>

त्वरित जाँच

"मूल तत्व के 30% में से 20px घटाने" के लिए कौन-सा calc() व्यंजक सही परिणाम देता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

calc() मिश्रित इकाइयों के साथ CSS में अंकगणित करने की सुविधा देता है। यह "पूर्ण व्यूपोर्ट में से स्थिर शीर्षलेख घटाने" जैसे गतिशील लेआउट और प्रवाही टाइपोग्राफी के प्रक्षेपण को सक्षम बनाता है। + और - ऑपरेटरों के आसपास रिक्त स्थान आवश्यक हैं। शक्तिशाली डिज़ाइन टोकन गणनाओं के लिए इसे CSS चरों के साथ मिलाएँ। पूर्ण प्रवाही आकार-नियंत्रण के लिए इसे min/max/clamp के साथ उपयोग करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “गतिशील गणना के लिए calc()” पाठ निःशुल्क है?

हाँ—“गतिशील गणना के लिए calc()” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“गतिशील गणना के लिए calc()” में मैं क्या सीखूँगा?

गतिशील मानों के लिए calc() function से CSS में unit मिलाइए और arithmetic कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“गतिशील गणना के लिए calc()” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

गतिशील गणना के लिए calc()
Fluid Value के लिए min(), max() और clamp()
Grid में repeat() और minmax()
color-mix() और Relative Color Syntax

← CSS Academy पर वापस जाएँ