CSS Math Functions

एक tailor की कल्पना करें जो fabric को हमेशा fixed sizes में ही काटता है, small, medium, या large। अगर किसी customer को बीच का कुछ चाहिए, तो tailor फँस जाता है। अब एक ऐसे tailor की कल्पना करें जो customer को मौके पर measure कर सके और fabric को exactly fit करने के लिए काट सके, कभी भी एक minimum से छोटा या एक maximum से बड़ा हुए बिना। CSS math functions layouts के लिए यही करते हैं। calc(), min(), max(), और clamp() आपको अपने CSS values के अंदर सीधे arithmetic करने और flexible bounds set करने देते हैं, ताकि sizes एक fixed number तक locked होने के बजाय viewport को respond कर सकें।

In this page:

calc() Function
min() Function
max() Function
clamp() Function
Math Functions को Custom Properties के साथ Combine करना

Syntax

css

selector {
  width: min(value1, value2);
  width: max(value1, value2);
  width: clamp(minimum, preferred, maximum);
}

calc() Function

calc() आपको एक ही expression में percentages और pixels जैसी units mix करने देता है, ताकि आप किसी fluid container width में से एक fixed sidebar width घटा सकें। यह responsive layouts के लिए सबसे उपयोगी CSS functions में से एक है, क्योंकि यह mixed-unit sizes calculate करने के लिए JavaScript की ज़रूरत हटा देता है।

Note:

calc() के अंदर + और - के दोनों तरफ़ हमेशा एक space छोड़ें; वरना operator को unit के हिस्से के रूप में parse किया जाएगा।
Accepted values:
calc(<expression>) — + - * / के साथ arithmetic
calc(100% - 40px) — percentages और lengths mix करता है
calc(2 * 1rem) — multiplication को एक तरफ़ एक plain number चाहिए
+ और - के आस-पास spaces — ज़रूरी

Warning: Multiplication और division में कम से कम एक plain number होना ज़रूरी है, आप दो length units को साथ में multiply नहीं कर सकते।

उदाहरण: The calc() Function

css

<style>
.box {
  width: calc(100% - 50px);
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">Fluid width minus a fixed sidebar</div>

min() Function

min() एक comma separated list में से सबसे छोटी value चुनता है, ताकि कोई box एक fixed maximum से कभी ज़्यादा हुए बिना छोटे screens पर shrink हो सके। इसे आमतौर पर किसी value को maximum पर cap करने के लिए इस्तेमाल किया जाता है जबकि उसे छोटे screens पर freely shrink होने भी दिया जाता है।

Note:

किसी fluid width को cap करने के लिए min() इस्तेमाल करें, उदाहरण के लिए min(90%, 600px) कभी 600px से ज़्यादा wide नहीं होता।
Accepted values:
min(<value>, <value>, ...) — सबसे छोटी resolved value
min(90%, 600px) — flexible लेकिन capped
min(1rem, 5vw) — unit types mix करता है
नोट: किसी भी length property में काम करता है

Warning: min() को फिर भी valid comparable units चाहिए, किसी percentage को किसी plain unitless number से compare करना invalid है।

उदाहरण: The min() Function

css

<style>
.box {
  width: min(90%, 600px);
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">Never wider than 600px, shrinks freely below that</div>

max() Function

max() एक list में से सबसे बड़ी value चुनता है, दूसरी values के shrink होने पर भी एक minimum size guarantee करते हुए। यह min() का mirror image है, आमतौर पर एक comfortable minimum readable font size enforce करने के लिए इस्तेमाल होता है।

Note:

readable text guarantee करने के लिए max() को viewport units के साथ combine करें, max(16px, 1vw) कभी 16px से नीचे नहीं जाता।
Accepted values:
max(<value>, <value>, ...) — सबसे बड़ी resolved value
max(50%, 300px) — एक floor के साथ flexible
max(1rem, 2vw) — कभी 1rem से छोटा नहीं
नोट: किसी भी length property में काम करता है

Warning: max() ऊपरी bound को clamp नहीं करता, अगर आपको एक ceiling भी चाहिए तो इसे min() या clamp() के साथ जोड़ें।

उदाहरण: The max() Function

css

<style>
p {
  font-size: max(16px, 1vw);
}
</style>
<p>Never smaller than 16px</p>

clamp() Function

clamp(minimum, preferred, maximum) किसी value को एक floor और एक ceiling के बीच fix कर देता है जबकि preferred value को बीच में flex होने देता है, fluid typography के लिए ideal। एक single clamp() call अक्सर उन कई media queries को replace कर देता है जो वरना अलग-अलग breakpoints पर किसी value को adjust करने के लिए चाहिए होतीं।

Note:

headings के लिए clamp() इस्तेमाल करें ताकि text कई media queries की ज़रूरत के बिना viewport के साथ smoothly scale हो।
Accepted values:
clamp(min, preferred, max) — min और max के बीच रहने वाली value
clamp(1rem, 2.5vw, 2rem) — fluid font-size
clamp(300px, 50%, 800px) — fluid width
तीनों arguments — ज़रूरी

Warning: preferred value बदलने में सक्षम होनी चाहिए, clamp(16px, 20px, 24px) जैसी एक fixed unit हमेशा सिर्फ 20px पर resolve होगी।

उदाहरण: The clamp() Function

css

<style>
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}
</style>
<h1>Scales fluidly between a floor and a ceiling</h1>

Math Functions को Custom Properties के साथ Combine करना

Math functions CSS custom properties को reference कर सकते हैं, आपको एक base value को centralize करने और उससे कई related sizes derive करने देते हुए। यह pattern किसी पूरे design system की spacing या type scale को consistent रखता है, हर size को एक shared variable से derive करते हुए।

Note:

एक custom property में एक base spacing unit store करें, फिर consistent spacing के लिए अपनी पूरी stylesheet में उस variable के साथ calc() reuse करें।
Accepted values:
calc(var(--gap) * 2) — किसी custom property को scale करता है
clamp(var(--min), 5vw, var(--max)) — tokens के साथ fluid
min(var(--w), 100%) — एक token से capped
var(--name) — एक valid value पर resolve होनी चाहिए

Warning: calc() के अंदर इस्तेमाल की गई custom properties को एक valid length या number पर resolve होना चाहिए, एक खाली या invalid variable पूरे expression को तोड़ देती है।

उदाहरण: Combining Math Functions With Custom Properties

css

<style>
:root {
  --base: 8px;
}
.box {
  padding: calc(var(--base) * 2);
  background: lightblue;
}
</style>
<div class="box">Derived from one shared base value</div>

Live Example

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Masking Next Lesson → CSS Motion Path

CSS Math Functions

calc() Function

min() Function

max() Function

clamp() Function

Math Functions को Custom Properties के साथ Combine करना

Chapter Quiz — Complete all 25 topics to unlock

Login to run this code