CSS यूनिट्स
आप पहले से color: teal जैसी declaration लिख सकते हैं। आकार गुणों को दूसरा विचार चाहिए: कितना बड़ा। अकेला font-size: 16 ज़्यादातर लंबाई गुणों के लिए अमान्य है — ब्राउज़र को यूनिट चाहिए ताकि पता चले «16» का मतलब क्या है।
CSS यूनिट्स क्या हैं?
CSS यूनिट्स लंबाई मानों से जुड़े माप के प्रत्यय हैं — उदाहरण px, rem, %, vw और vh। निरपेक्ष यूनिट पैरेंट से स्वतंत्र एक ही आकार रखती हैं। सापेक्ष यूनिट किसी और चीज़ के साथ स्केल होती हैं: तत्व का फ़ॉन्ट, रूट फ़ॉन्ट, पैरेंट का आकार, या व्यूपोर्ट।
निरपेक्ष बनाम सापेक्ष एक नज़र में
इस टेबल को मानचित्र की तरह रखें। पहले दिन हर यूनिट की ज़रूरत नहीं — परिवार समझें, फिर रोज़मर्रा की यूनिट्स का अभ्यास करें।
📊 आम CSS लंबाई यूनिट्स
| यूनिट | परिवार | सामान्य उपयोग |
|---|---|---|
| px | निरपेक्ष (स्क्रीन पिक्सेल) | बॉर्डर, महीन आइकन समायोजन, 1px रेखाएँ |
| rem | रूट फ़ॉन्ट आकार के सापेक्ष | पेज टेक्स्ट और सुसंगत स्पेसिंग |
| em | तत्व के अपने फ़ॉन्ट के सापेक्ष | पैडिंग जो स्थानीय टेक्स्ट के साथ बढ़े |
| % | पैरेंट आकार के सापेक्ष | कंटेनर के अंदर तरल चौड़ाई |
| vw | व्यूपोर्ट चौड़ाई के सापेक्ष | फुल-ब्लीड सेक्शन (सावधानी से) |
| vh | व्यूपोर्ट ऊँचाई के सापेक्ष | हीरो ऊँचाई, फुल-स्क्रीन पैनल |
पिक्सेल (px)
px स्क्रीन पर निरपेक्ष यूनिट है। पतले बॉर्डर और छोटे स्थिर विवरण के लिए अनुमानित। रिस्पॉन्सिव साइट पर सारी टाइपोग्राफी के लिए अकेली यूनिट के रूप में कम आदर्श है, क्योंकि यह उपयोगकर्ता की रूट फ़ॉन्ट प्राथमिकता के साथ rem की तरह अपने आप स्केल नहीं होती।
कार्ड बॉर्डर के लिए पिक्सेल आकार
css.card {
border: 1px solid #cbd5e1;
border-radius: 8px;
width: 320px;
}कब px अभी भी चमकता है
बाल जैसी बॉर्डर, शैडो ऑफसेट और छोटे UI chrome के लिए px चुनें जहाँ स्थिर किनारा चाहिए। जब डिज़ाइन फ़ॉन्ट आकार या कंटेनर चौड़ाई के साथ साँस ले, सापेक्ष यूनिट बेहतर हैं।
rem और em
rem रूट तत्व के फ़ॉन्ट आकार के सापेक्ष है (आमतौर पर <html>)। em वर्तमान तत्व के फ़ॉन्ट आकार के सापेक्ष है (या गुण के अनुसार पैरेंट)। शुरुआती लोगों के लिए font-size और कई स्पेसिंग मानों का सुरक्षित डिफ़ॉल्ट rem है क्योंकि नेस्टेड तत्वों में यह सुसंगत रहता है।
rem के साथ रूट-सापेक्ष टाइप
csshtml {
font-size: 100%; /* often 16px in browsers */
}
.lead {
font-size: 1.25rem; /* ~20px if root is 16px */
margin-bottom: 0.75rem;
}एक वाक्य में em
जब आप चाहते हैं कि मान स्थानीय फ़ॉन्ट के साथ स्केल हो तब em इस्तेमाल करें — जैसे पैडिंग जो उस कंपोनेंट का टेक्स्ट बड़ा होने पर बढ़े। अगर नेस्टेड em गुणा होकर «बिगड़» जाएँ, उन आकारों को rem में बदलें।
प्रतिशत (%)
प्रतिशत पैरेंट माप के सापेक्ष होता है। width: 50% पर तत्व पैरेंट की चौड़ाई का आधा लक्ष्य करता है (जब पैरेंट की परिभाषित चौड़ाई हो)। प्रतिशत कंटेनर के अंदर तरल लेआउट का क्लासिक औज़ार है।
प्रतिशत के साथ तरल चौड़ाई
css.sidebar {
width: 30%;
}
.main {
width: 70%;
}व्यूपोर्ट यूनिट्स (vw और vh)
1vw व्यूपोर्ट चौड़ाई का 1% है; 1vh व्यूपोर्ट ऊँचाई का 1%। फुल-स्क्रीन हीरो के लिए शक्तिशाली, पर आसानी से अतिप्रयोग — केवल vw में मापा टेक्स्ट बहुत चौड़ी या बहुत संकरी स्क्रीन पर अपठनीय हो सकता है।
हीरो के लिए व्यूपोर्ट ऊँचाई
css.hero {
min-height: 80vh;
padding: 2rem;
}चुनने की व्यावहारिक आदत
शुरुआती आदत: फ़ॉन्ट आकार और ज़्यादातर लंबवत स्पेसिंग के लिए rem, चौड़ाई के लिए % या लचीले लेआउट टूल (बाद में: Flexbox/Grid), और बॉर्डर व छोटे स्थिर विवरण के लिए px। फुल-ब्लीड सेक्शन बनाते समय व्यूपोर्ट यूनिट्स लौटाएँ — हर मार्जिन के लिए नहीं।
स्वयं आज़माएँ
.cardनियम बनाएँ:width: 80%,max-width: 24rem, औरborder: 1px solid #94a3b8।- सेट करें
.card h2 { font-size: 1.5rem; }और छोटा पैराग्राफ1remपर। - कार्ड के ऊपर
.banner { min-height: 40vh; }सेक्शन जोड़ें। - विंडो का आकार बदलें और रूट
html { font-size: … }बदलकर देखें कि%,vhऔरremकैसे अलग प्रतिक्रिया देते हैं। - वैकल्पिक:
.cardमें हेडिंग को1.5emकरें और देखें नेस्टिंग चौंकाती है या नहीं।
आम गलतियाँ
- बिना यूनिट
font-size: 16लिखना — मानक CSS में लंबाई के लिए अमान्य - ऐसी साइट पर हर फ़ॉन्ट के लिए केवल
pxजो ज़ूम/उपयोगकर्ता प्राथमिकता का सम्मान करे - कई
emनेस्ट करना जब तक टेक्स्ट बहुत बड़ा या बहुत छोटा हो जाए - बॉडी टेक्स्ट केवल
vwसे सेट करना ताकि बड़े मॉनिटर पर पंक्तियाँ फट जाएँ - यह मानना कि
%ऊँचाई काम करेगी जब पैरेंट की स्पष्ट ऊँचाई न हो
सारांश
- लंबाई मानों को आमतौर पर यूनिट चाहिए (
px,rem,%,vw, …) - निरपेक्ष स्थिर रहती हैं; सापेक्ष फ़ॉन्ट, पैरेंट या व्यूपोर्ट के साथ स्केल होती हैं
- टाइप के लिए
rem, चौड़ाई के लिए%/लेआउट सिस्टम, महीन बॉर्डर के लिएpxचुनें emस्थानीय फ़ॉन्ट के साथ;vw/vhव्यूपोर्ट के साथ स्केल होते हैं- काम के अनुसार यूनिट मिलाएँ — हर जगह एक ही यूनिट न थोपें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी