सही CSS यूनिट चुनना, सुंदर ढंग से स्केल होने वाले लेआउट और टूटने वाले लेआउट के बीच का अंतर है। यह चीट शीट CSS लंबाई यूनिट्स को प्रकार के अनुसार समूहित करती है — निरपेक्ष, फ़ॉन्ट-सापेक्ष, व्यूपोर्ट और प्रतिशत — साथ ही उन्हें जोड़ने वाले फ़ंक्शन (calc, min, max, clamp)।
प्रत्येक पंक्ति बताती है कि यूनिट किसके सापेक्ष है और इसे कब उपयोग करना है। इन यूनिट्स का उपयोग करने वाली लेआउट प्रॉपर्टीज़ के लिए <a href="/cheatsheet/css-flexbox">Flexbox</a> और <a href="/cheatsheet/css-grid">Grid</a> चीट शीट देखें।
Absolute Units
| Unit | What it does |
|---|
px | Pixels — a fixed size that does not scale with font or viewport. |
pt | Points (1pt = 1/72 inch) — mainly used for print styles. |
cm / mm / in | Physical units for print; rarely used on screen. |
Font-relative Units
| Unit | What it does |
|---|
rem | Relative to the root font size — best for scalable, consistent sizing. |
em | Relative to the current element's font size; compounds when nested. |
ch | Width of the '0' character — handy for sizing text columns. |
ex | Height of the lowercase 'x'; rarely used. |
Viewport Units
| Unit | What it does |
|---|
vw | 1% of the viewport width. |
vh | 1% of the viewport height. |
vmin | 1% of the smaller viewport dimension. |
vmax | 1% of the larger viewport dimension. |
dvh / svh / lvh | Dynamic, small, and large viewport height — account for mobile browser bars. |
Percentage & Fractional
| Unit | What it does |
|---|
% | Relative to the parent element's corresponding size. |
fr | A fraction of the free space in a CSS Grid container. |
Useful Functions
| Unit | What it does |
|---|
calc(100% - 2rem) | Mix units in a single computed length. |
min(50%, 400px) | Use whichever value is smaller. |
max(300px, 50%) | Use whichever value is larger. |
clamp(1rem, 2.5vw, 2rem) | A fluid value with a minimum and maximum — great for typography. |
CSS यूनिट्स चीट शीट से जुड़े सामान्य प्रश्न
px और rem में क्या अंतर है?
px एक निरपेक्ष, निश्चित आकार है। rem रूट (html) फ़ॉन्ट आकार के सापेक्ष है, इसलिए यदि उपयोगकर्ता अपने ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट आकार बढ़ाता है, तो rem-आधारित आकार उसके साथ स्केल होते हैं। लेआउट को सुलभ रखने के लिए फ़ॉन्ट आकार और स्पेसिंग के लिए rem उपयोग करें।
em और rem में क्या अंतर है?
दोनों फ़ॉन्ट-सापेक्ष हैं, पर em वर्तमान एलिमेंट के फ़ॉन्ट आकार के सापेक्ष है जबकि rem रूट फ़ॉन्ट आकार के सापेक्ष है। चूंकि em नेस्टिंग से कंपाउंड होता है, अधिकांश साइज़िंग के लिए rem अधिक पूर्वानुमेय है; em उस स्पेसिंग के लिए उपयोगी है जो किसी कंपोनेंट के अपने टेक्स्ट के साथ स्केल होनी चाहिए।
मुझे vh और vw कब उपयोग करना चाहिए?
स्क्रीन के साथ स्केल होने वाले एलिमेंट्स के लिए vw और vh (व्यूपोर्ट चौड़ाई/ऊंचाई का 1%) उपयोग करें, जैसे पूर्ण-ऊंचाई हीरो सेक्शन। मोबाइल पर dvh (डायनामिक व्यूपोर्ट ऊंचाई) को प्राथमिकता दें ताकि मान ब्राउज़र के एड्रेस बार के दिखने-छिपने का ध्यान रखे।
CSS में clamp() क्या करता है?
clamp(min, preferred, max) पसंदीदा मान लौटाता है पर कभी min से नीचे या max से ऊपर नहीं। यह फ्लूइड टाइपोग्राफी के लिए एकदम सही है, जैसे font-size: clamp(1rem, 2.5vw, 2rem) पठनीय सीमा में रहते हुए व्यूपोर्ट के साथ स्केल होता है।
% और vw में क्या अंतर है?
% पैरेंट एलिमेंट के आकार के सापेक्ष है, जबकि vw पूरे व्यूपोर्ट के सापेक्ष है। 50% की चौड़ाई कंटेनर पर निर्भर करती है; 50vw हमेशा स्क्रीन चौड़ाई का आधा होता है, चाहे एलिमेंट कहीं भी हो।
रिस्पॉन्सिव डिज़ाइन के लिए कौन सी CSS यूनिट सबसे अच्छी है?
कोई एक सर्वश्रेष्ठ यूनिट नहीं है — इन्हें मिलाएं। टाइपोग्राफी और स्पेसिंग के लिए rem, फ्लूइड लेआउट चौड़ाई के लिए % या fr, पूर्ण-स्क्रीन सेक्शन के लिए व्यूपोर्ट यूनिट्स, और ब्रेकपॉइंट के बीच सहज स्केलिंग के लिए clamp() उपयोग करें।
