CSS टॉपिक्स

🎨 CSS Design✨पाठ 14 / 16

Units और Math Functions

px vs rem vs em vs vw/vh/dvh का अंतर। calc(), min(), max() और clamp() से फ्लुइड टाइपोग्राफी और स्मार्ट लेआउट बनाना सीखें।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

🎯 इस पाठ में आप क्या सीखेंगे

1.पूरी Units की दुनिया: px, rem, em, %, vw/vh/dvh, ch, vmin/vmax — कब क्या use करें।

2.rem बनाम em का असली फ़र्क: इन दोनों को confuse करने से nested components में टूटा हुआ layout क्यों बनता है।

3.calc() की बनावट: अलग-अलग units को मिलाना, operators के नियम और nesting।

4.min() और max(): पुराने दो-property हैक का एक-line आधुनिक विकल्प।

5.clamp() Fluid Typography: बिना एक भी media query के असली responsive text।

6.Mobile Viewport Units: dvh vs svh vs lvh — iOS address bar bug का permanent solution।

📏 CSS Units की पूरी Cheat Sheet

CSS में units दो परिवारों में बँटी हैं: Absolute (फिक्स्ड, कभी नहीं बदलतीं) और Relative (किसी reference के हिसाब से scale होती हैं)। कौन-सा परिवार कहाँ use करें — यह CSS का सबसे high-leverage skill है।

ABSOLUTEफिक्स्ड — user preference और parent size को ignore करती हैं

px (पिक्सल)

Screen का एक CSS pixel। सबसे precise absolute unit। इसके लिए: 1px पतले border, box-shadow offset, icon size। इससे बचें: font-size (browser zoom accessibility टूट जाती है)।

pt, cm, mm, in (Print Units)

असली दुनिया की physical units — print stylesheets के लिए। Screen पर 1in = 96px। Web CSS में लगभग कभी use नहीं होते — सिर्फ @media print rules में।

RELATIVEलचीली — किसी reference के अनुसार scale होती हैं

rem (Root EM)<html> font-size के सापेक्ष

1rem = 16px (browser default)। User browser zoom का सम्मान करती है। सभी typography और spacing के लिए industry standard। Nested components में consistent।

emPARENT element font-size के सापेक्ष

Nested elements में compound (गुणा) होती है! 2em parent में 1em child = 32px। इसके लिए: letter-spacing, line-height, text size के relative border-radius।

% (प्रतिशत)PARENT element dimension के सापेक्ष

width: 50% = parent container की आधी चौड़ाई। height: % के लिए parent पर explicit height ज़रूरी। Fluid layouts का आधार।

vw / vhVIEWPORT (browser window) के सापेक्ष

1vw = viewport width का 1%। 100vh = पूरी browser window height। समस्या: vh mobile address bar को ignore करता है।

dvh / svh / lvhDynamic/Small/Large Viewport Height

dvh = dynamic, mobile address bar के show/hide होने पर update होता है। svh = bar visible होने पर। lvh = bar hidden होने पर। Full-screen mobile layouts के लिए 100dvh use करो।

chcurrent font के "0" glyph की चौड़ाई

1ch ≈ “0” character की चौड़ाई। Typography research: 45–75 chars/line optimal। Article text पर max-width: 65ch = हर screen, हर font पर perfect reading comfort।

⚠️ सबसे Confusing जोड़ी: rem बनाम em

दोनों सुनने में एक जैसे लगते हैं। दोनों “relative EM units” हैं। लेकिन reference बिल्कुल अलग है — और इन्हें confuse करने पर cascading multiplication bugs बनते हैं जिन्हें debug करना बहुत मुश्किल होता है:

/* rem — हमेशा <html> = 16px के सापेक्ष */

html { font-size: 16px; }

.parent { font-size: 2rem; } /* = 32px */

.child { font-size: 1rem; } /* = 16px ✅ हमेशा */

/* em — PARENT element font-size के सापेक्ष */

html { font-size: 16px; }

.parent { font-size: 2em; } /* = 32px */

.child { font-size: 1em; } /* = 32px! ⚠️ parent inherit */

याद रखो: rem font sizes और spacing के लिए (हमेशा predictable)। em सिर्फ उन properties के लिए जो उस element के own font size के सापेक्ष scale होनी चाहिए — जैसे letter-spacing: 0.05em या button पर padding: 0.75em।

🏔️ तीन नापने के औजार — लोहे की पटरी, दर्जी का फीता, और पहाड़ी रेलिंग

📐

लोहे की सख्त पटरी (`px`)

30cm का लोहे का फुटा जो कभी नहीं मुड़ता। अगर बढ़ते बच्चे के कपड़े इससे सिलेंगे तो कपड़े फट जाएँगे। CSS में font-size पर px लिखना — vision-impaired users के लिए जो browser zoom करते हैं — website को तोड़ देता है।

px के लिए: borders, shadows, icons। Font-size के लिए नहीं।

📏

दर्जी का लचीला फीता (`rem` और `vw`)

शरीर के साथ सांस लेता है। User browser font 16px से 24px करे तो सारे rem माप उसी अनुपात में खुद-ब-खुद बड़े हो जाते हैं। Browser window चौड़ा हो तो vw proportionally expand होता है।

Typography और spacing का industry standard।

🛡️

पहाड़ी सड़क की रेलिंग (`clamp()`)

घुमावदार पहाड़ी रास्ते पर कार आज़ाद चलती है लेकिन दोनों तरफ रेलिंग है। clamp(min, preferred, max) font को screen width के साथ scale करने की आज़ादी देता है — पर गारंटी: mobile पर इतना छोटा नहीं कि पढ़ा न जाए, 4K पर इतना बड़ा नहीं कि screen फाड़ दे।

Hard safety limits के साथ fluid design।

🧮 `calc()` — वो Units मिलाना जो normally नहीं मिल सकते

calc() CSS की fundamental problem solve करता है: normally आप % में से px घटा नहीं सकते क्योंकि दोनों अलग-अलग समय पर resolve होते हैं। calc() यह math render time तक postpone कर देता है जब दोनों values known हों।

4 Operators — और Critical Whitespace Rule

+ (जोड़) और * (गुणा)

Technically + के आसपास whitespace optional है, पर consistency के लिए हमेशा space लिखो। * के आसपास optional।

calc(100% + 20px) ✅

- (घटाव) — MANDATORY whitespace!

CSS -40px को negative number मानता है। बिना space के calc(100%-40px) चुपचाप fail हो जाता है! यह calc() का #1 bug है।

calc(100%-40px) ❌ टूटा!

calc(100% - 40px) ✅ सही

calc() के अंदर calc() nest करना

Complex formulas के लिए multiple calc() nest कर सकते हो:

width: calc(calc(100% - 40px) / 3);

पर modern CSS में min(), max(), clamp() के अंदर बिना calc() के ही math लिख सकते हो।

Real use-cases

/* sidebar + content */

width: calc(100% - 280px);

/* scrollbar offset */

width: calc(100vw - 17px);

/* nav + content height */

height: calc(100dvh - 64px);

↔️ `min()` और `max()` — Smart Single-Line Constraints

`min(a, b)` — छोटा मान चुनता है

पुराने max-width + width दो-property pattern का replacement। Browser दोनों values calculate करके जो numerically छोटी हो उसे use करता है।

/* पुराना तरीका — 2 properties */

.card { max-width: 600px; width: 90%; }

/* Modern — 1 property */

.card { width: min(600px, 90%); }

Desktop 1440px पर: 90% = 1296px > 600px → 600px use। Mobile 390px पर: 90% = 351px < 600px → 351px use। Mobile margins automatically!

`max(a, b)` — बड़ा मान चुनता है

Minimum value guarantee करता है। min-width combos का replacement। WCAG accessibility minimum 44px touch target ensure करने के लिए।

/* Guaranteed minimum touch target */

.btn { padding: max(12px, 3vw); }

/* Fluid padding with floor */

.section { padding: max(24px, 8vw); }

Mobile 390px पर: max(12px, 3% of 390 = 11.7px) → 12px। Desktop 1440px पर: max(12px, 3% of 1440 = 43.2px) → 43.2px। Safe minimum के साथ auto-scaling!

📎 `clamp()` — बिना Media Query के Fluid Typography

clamp(न्यूनतम, पसंदीदा, अधिकतम) दरअसल max(minimum, min(preferred, maximum)) है — यह एक fluid value को hard lower और upper bound के बीच clamp कर देता है। दोनों ends पर stops वाला slider सोचो।

clamp(1rem, 4vw, 2.5rem) का Visual Diagram

1rem (16px)

2.5rem (40px)

छोटी screen (< 400px)4vw = 16px

Preferred ≤ Minimum → browser 1rem (16px) use करेगा — नीचे clamped।

Medium screen (600px)4vw = 24px

Preferred दोनों bounds के बीच → browser 24px use — fluid scaling!

बड़ी screen (> 625px)4vw = 40px+

Preferred ≥ Maximum → browser 2.5rem (40px) use — ऊपर clamped।

/* Fluid typography का formula — 320px से 4K तक कहीं भी */

h1 { font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem); }

p { font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); }

.section { padding: clamp(1.5rem, 5vw, 5rem); }

/* preferred में + 0.5rem — microscopic screens पर 0 नहीं होने देता */

📱 Mobile Viewport Units — iOS Address Bar Bug का Solution

100vh full-screen mobile layouts के लिए perfect लगता था — जब तक iOS Safari और mobile Chrome ने scroll के दौरान address bar को ऊपर-नीचे करना शुरू किया। 100vh इसे ignore करता है, जिससे page का निचला 50–80px address bar के पीछे hide हो जाता है।

100vh

पुराना तरीका (टूटा)। Page load पर एक बार calculate होता है। Address bar height changes ignore होती हैं। iOS Safari पर bottom CTA buttons hide हो जाते हैं।

100dvh

Dynamic। Scroll करते समय address bar expand/collapse होने पर real-time update। Full-screen app shells और hero sections के लिए use करो।

svh / lvh

Small / Large viewport। svh = bar visible होने पर height। lvh = bar hidden होने पर height। Stable non-jumping value चाहिए तो।

/* Hero section — mobile full-screen के लिए dvh */

.hero { min-height: 100dvh; }

/* पुराने browsers के लिए safe fallback: */

.hero { min-height: 100vh; min-height: 100dvh; }

💻 लाइव Fluid Units और clamp() एडिटर

Card min(520px, 92%) से width, clamp() से fluid heading और body text, और calc(100% - 100px) से search input use करता है। Preview resize करके, clamp values बदलकर देखें!

Interactive Live Editor— Edit HTML directly on the left to see live preview on the right

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Units & Math Functions Demo</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: system-ui, sans-serif;
      background: #f8fafc;
      padding: 24px 16px;
      color: #1e293b;
    }

/* Container sized with min() and clamp() */
    .fluid-card {
      /* min: whichever is smaller: 520px or 92% of screen */
      width: min(520px, 92%);
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: clamp(16px, 4vw, 32px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    }

/* Fluid Typography with clamp(min, val, max) */
    .fluid-title {
      /* Minimum 20px on mobile, scales smoothly at 4vw, caps at 36px on desktop */
      font-size: clamp(1.25rem, 4vw + 0.5rem, 2.25rem);
      font-weight: 800;
      line-height: 1.2;
      color: #0f172a;
      margin-bottom: 12px;
    }

.fluid-body {
      font-size: 1rem;
      line-height: 1.6;
      color: #475569;
      margin-bottom: 20px;
    }

/* Math with calc() */
    .sidebar-layout {
      display: flex;
      gap: 12px;
    }

.main-bar {
      /* calc takes full width minus 100px for the action button */
      width: calc(100% - 100px);
      background: #e0e7ff;
      color: #3730a3;
      padding: 12px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 13px;
      text-align: center;
    }

.action-btn {
      width: 100px;
      background: #4f46e5;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="fluid-card">
    <h2 class="fluid-title">Fluid Typography With CSS clamp()</h2>
    <p class="fluid-body">
      Resize your browser window! Notice how this headline smoothly scales between 20px on mobile and 36px on widescreen without abrupt media query jumps.
    </p>

<div class="sidebar-layout">
      <div class="main-bar">calc(100% - 100px) Input Box</div>
      <button class="action-btn">Submit</button>
    </div>
  </div>
</body>
</html>

Click & type to editHTML5

Browser Preview

Code का एक-एक लाइन विश्लेषण

Playground की सबसे important techniques का विस्तृत विश्लेषण:

width: min(520px, 92%);

पुराने दो-line combo का replacement: max-width: 520px; width: 92%;। Browser render time पर दोनों calculate करता है: Desktop 1440px पर 92% = 1324.8px > 520px, तो 520px। iPhone 390px पर 92% = 358.8px < 520px, तो 358.8px — automatically दोनों sides पर 4% breathing room।

font-size: clamp(1.25rem, 4vw + 0.5rem, 2.25rem);

Typography का ideal formula। Preferred value 4vw + 0.5rem है — viewport-relative और root-relative का combination। + 0.5rem ensure करता है कि microscopic screens (smartwatch, 150px width जहाँ pure 4vw = 6px) पर भी text readable रहे। clamp() ensure करता है कि यह 1.25rem (20px) से नीचे और 2.25rem (36px) से ऊपर नहीं जाएगा।

width: calc(100% - 100px);

- के दोनों तरफ mandatory spaces। Input box को 100px submit button के बाद बची सारी horizontal space दे देता है। बिना calc() के percentage में से fixed pixel घटाना impossible था — दोनों अलग render stages पर resolve होते हैं। Spaces बिना CSS 100%-100px को invalid syntax मानकर पूरी rule silently ignore कर देता है।

max-width: 65ch;

Typography readability unit। 1ch = current font के 0 glyph की चौड़ाई। Research कहती है 45–75 chars per line optimal reading comfort है। max-width: 65ch article body text पर guarantee करता है कि हर screen और font पर line length ideal रहेगी। User font size preference बदले तो ch value automatically adjust — px based max-width यह नहीं कर सकती।

🧠 अपनी समझ परखें: CSS Units और Math

Q1CSS में `width: calc(100%-40px);` लिखने पर एरर क्यों आता है, जबकि `width: calc(100% - 40px);` बिल्कुल सही काम करता है?

Q2`font-size: clamp(1rem, 2.5vw, 2rem);` लिखने पर फॉन्ट कैसा व्यवहार करता है?

Q3स्मार्टफोन के लिए `100vh` की जगह नई यूनिट `100dvh` (Dynamic Viewport Height) क्यों लाई गई?

🛠️

खुद ट्राई करो: Complete Fluid System बनाओ

ऊपर के live editor में ये 4 experiments order में करो:

Fluid Padding: .fluid-card की padding को clamp(12px, 5vw, 40px); करो। Preview resize करो — card का breathing room कितना smoothly scale होता है देखो!
Layout Balance: .action-btn width 120px करो। फिर .main-bar को width: calc(100% - 120px); दो। Input box automatically remaining space fill करेगा।
Typography Guard: <p> tag के selector में max-width: 65ch; जोड़ो। Wide screens पर paragraph comfortable reading width पर खुद रुक जाएगा — कोई media query नहीं!
Bonus — Hero Section: नया <div class="hero"> जोड़ो। उसे min-height: 100dvh; और dark background दो। Card अब properly नहीं कटेगा — viewport height browser chrome को respect करेगी!

💡 पूरा solution देखने के लिए क्लिक करें

.fluid-card { width: min(520px, 92%); padding: clamp(12px, 5vw, 40px); }

.main-bar { width: calc(100% - 120px); }

.action-btn { width: 120px; }

p { max-width: 65ch; }

.hero { min-height: 100dvh; background: #0f172a; }

आम गलतियाँ और इंटरव्यू के सवाल

❌ गलती 1: `calc()` में Whitespace भूलना

calc(100%-20px) सभी browsers में चुपचाप fail होता है — console में कोई error नहीं। + और - के आसपास spaces CSS spec में required हैं, style preference नहीं। हमेशा: calc(100% - 20px)।

❌ गलती 2: Font Sizes के लिए `px` use करना

body या headings पर font-size: 16px user के browser default zoom preference को override कर देता है। Low vision users जो 200% zoom करते हैं — उनके लिए text double होना चाहिए। rem use करो — user zoom settings respect होती हैं और WCAG 1.4.4 pass होती है।

✅ Best Practice: min/max/clamp के अंदर calc() के बिना Math

Modern CSS (Level 4) में min(), max(), clamp() के अंदर directly arithmetic expressions लिख सकते हो — calc() में wrap करने की ज़रूरत नहीं। clamp(16px, 2vw + 10px, 32px) valid है और verbose clamp(16px, calc(2vw + 10px), 32px) से बेहतर।

✅ Best Practice: हमेशा `100vh` Fallback दो

dvh well-supported है (Chrome 108+, Safari 15.4+, Firefox 101+) पर पुराने browsers support नहीं करते। Safe fallback पहले declare करो: min-height: 100vh; min-height: 100dvh;। Old browsers vh use करेंगे, modern dvh।

💬 इंटरव्यू प्रश्न: `ch` unit क्या होती है और blog posts में क्यों पसंद की जाती है?

1ch = current active font के zero (0) glyph की चौड़ाई। यह “एक character की चौड़ाई” का proxy है उस typeface में।

Typography research (Baymard Institute, Nielsen Norman) consistently दिखाती है कि 45–75 characters per line optimal reading comfort है। 45 से कम = बहुत ज़्यादा eye jumps। 75 से ज़्यादा = line start वापस track करना मुश्किल।

Article body text पर max-width: 65ch guarantee करता है कि हर device और font पर line length ideal रहेगी। Font size change होने पर ch value automatically adjust — px based max-width यह नहीं कर सकती।

💬 इंटरव्यू प्रश्न: `svh`, `lvh` और `dvh` में क्या अंतर है?

तीनों mobile पर viewport height represent करते हैं लेकिन browser chrome के अलग-अलग states में:

svh (Small Viewport Height): जब browser के UI bars (address bar, bottom nav) पूरी तरह visible हों — minimum visible height, सबसे conservative।
lvh (Large Viewport Height): जब scroll करने पर bars पूरी तरह hide हो जाएँ — maximum possible height।
dvh (Dynamic Viewport Height): User scroll करे और bars show/hide हों तो real-time update। Animated elements पर layout reflows cause कर सकता है। Hero sections के लिए best।

Practical: 100dvh hero/app shells के लिए। svh जब worst case पर no-clipping guarantee चाहिए।

💬 इंटरव्यू प्रश्न: `rem` और `em` में क्या फ़र्क है और `em` कब use करते हैं?

rem (Root EM) हमेशा <html> element के font-size (default 16px) के सापेक्ष है। Nested elements में consistent रहती है, compound नहीं होती।

em current element के own font-size (या parent से inherited) के सापेक्ष है। Nested elements में multiply होती है: 2em parent में 1.5em child = root के relative 3em total!

em कब use करें: वो properties जो element के own text size के proportionally scale होनी चाहिए — जैसे letter-spacing: 0.05em, line-height: 1.6 (unitless preferred), या buttons पर padding: 0.75em 1.25em जहाँ padding font size के साथ grow/shrink हो।

💬 इंटरव्यू प्रश्न: बिना media queries के fluid type scale कैसे बनाएँ?

clamp() use करो — viewport-relative preferred value को root-relative base के साथ mix करके। Formula clamp(min, preferred-vw + base-rem, max) हर screen size पर smoothly scale करती है:

/* Complete fluid type scale — कोई media query नहीं */

:root {

--fs-sm: clamp(0.875rem, 1vw + 0.5rem, 1rem);

--fs-base: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);

--fs-lg: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);

--fs-xl: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);

--fs-2xl: clamp(2rem, 4vw + 0.5rem, 3.5rem);

}

यह approach brittle breakpoint-based font-size overrides को eliminate करती है। Text हर screen size पर correct दिखती है — standard breakpoints के बीच की sizes पर भी।

अगला लेसनTransitions & Transforms