लोड हो रहा है...

CSS Calc और गणित फ़ंक्शन

Custom properties ने values को नाम दिए। Math functions render समय गणना करती हैं: 100% से sidebar घटाएँ, min() से cap लगाएँ, clamp() से smooth typography — Sass build के बिना।

`calc()` — property value में arithmetic

calc(...) में expression। + और − के आसपास space ज़रूरी:

Main column beside a fixed sidebar

css

:root {
--sidebar-w: 16rem;
--gap: 1rem;
}

.layout {
display: flex;
gap: var(--gap);
}

.sidebar {
flex: 0 0 var(--sidebar-w);
}

.main {
flex: 1 1 auto;
min-width: 0;
/* readable fallback when flex alone is not enough */
max-width: calc(100% - var(--sidebar-w) - var(--gap));
}

%, rem, px, vw और var() mix करें जब result valid हो।

Spaces और unit rules

Invalid: calc(100%-2rem)। Valid: calc(100% - 2rem)। * में एक factor number हो।

Padding from a spacing token

css

.card {
--space: 0.75rem;
padding: var(--space) calc(var(--space) * 2);
margin-block: calc(var(--space) / 2);
}

`min()` और `max()`

min() सबसे छोटा; max() सबसे बड़ा:

Column that never overflows the viewport

css

.hero-inner {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}

.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

`clamp()` — bounded fluid values

क्रम: min, preferred, max।

Fluid heading between readable bounds

css

:root {
--text-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
--heading-lg: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

body {
font-size: var(--text-base);
}

h1 {
font-size: var(--heading-lg);
line-height: 1.2;
}

ये functions computed value समय resolve होते हैं — :root tokens के साथ मेल खाते हैं और cascade का पालन करते हैं।

कौन सा function कब?

📊 Math functions

Function	विचार	उपयोग
calc()	एक property के लिए formula	gutter घटाना, token ×2
min()	«इससे बड़ा नहीं»	width cap
max()	«कम से कम…»	minimum size
clamp()	min + preferred + max	fluid font-size

सरल page height pattern

Main area at least viewport minus header

css

:root {
--header-h: 4rem;
}

.page {
min-height: max(100vh, calc(100vh - var(--header-h) + 100%));
}

/* simpler pattern most teams use */
.page-simple {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
}

Try it

दो column, main पर calc।
fixed font-size → clamp।
min(100%, 40rem)।
:root पर repeated formula token।
calc(100%-1rem) में spaces।

Common mistakes

calc(100%-2rem) बिना space
clamp में min > max
ceiling के लिए max() (min() चाहिए)
property name में calc
दो lengths divide

Summary

calc() — + / - के आसपास space
min() / max() — list से extreme
clamp() — fluid type bounds
var(--tokens) के साथ
अगला: CSS nesting

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा