CSS Measurement Units in Hindi – आसान जानकारी

CSS Units का परिचय – Introduction to CSS Measurement Units in Hindi

जब हम किसी वेबसाइट का design या layout बनाते हैं, तो हमें हर चीज़ का size, spacing और position तय करनी पड़ती है — जैसे कि text का font-size कितना हो, box की चौड़ाई (width) कितनी हो या image कितनी बड़ी दिखे।
इन सभी चीज़ों को सही तरीके से define करने के लिए हम CSS Measurement Units का उपयोग करते हैं।

साधारण शब्दों में कहें तो —

CSS Units वे माप (measurement values) होती हैं जिनकी मदद से हम किसी element की लंबाई, चौड़ाई, font size, margin, padding आदि को सेट करते हैं।

उदाहरण के लिए

p {
  font-size: 16px;
  margin: 20px;
}

ऊपर दिए गए कोड में px एक CSS Measurement Unit है, जो बताता है कि font size और margin को कितने pixels में दिखाना है।

हर unit का अपना अलग महत्व और उपयोग होता है।
कुछ units fixed होती हैं (Absolute Units), जबकि कुछ responsive design के लिए flexible होती हैं (Relative Units)।
इन्हीं दोनों प्रकारों को हम आगे विस्तार से समझेंगे।

---

CSS Units के विभिन्न प्रकार – Types of CSS Measurement Units in Hindi

CSS में माप (measurement) करने के लिए कई तरह की units होती हैं, लेकिन उन्हें मुख्य रूप से दो भागों में बाँटा गया है — Absolute Units और Relative Units।
इन दोनों के बीच का फर्क समझना बहुत जरूरी है, क्योंकि दोनों का उपयोग अलग-अलग परिस्थितियों में किया जाता है।

1. Absolute Units:
ये units हमेशा एक निश्चित (fixed) आकार को दर्शाती हैं।
इनका आकार किसी और element या screen size पर निर्भर नहीं करता।
उदाहरण के लिए: px, cm, mm, in, pt आदि।

2. Relative Units:
ये units किसी अन्य value पर निर्भर करती हैं, जैसे कि parent element का size या viewport का आकार।
इन्हें responsive design में सबसे ज़्यादा इस्तेमाल किया जाता है।
उदाहरण के लिए: %, em, rem, vw, vh आदि।

Absolute और Relative units दोनों के अपने-अपने फायदे और उपयोग के क्षेत्र हैं, जिन्हें हम आगे विस्तार से समझेंगे।

---

Absolute Measurement Units

Absolute units वे होती हैं जिनका आकार हमेशा स्थिर (fixed) रहता है।
इनका मतलब यह है कि चाहे आपकी screen का size बदल जाए या device अलग हो — इन units की value हमेशा समान रहती है।
इसी वजह से absolute units का उपयोग print media या non-responsive design में किया जाता है, जहाँ layout को fix रखना होता है।

नीचे कुछ commonly used absolute units दिए गए हैं:

Unit	पूरा नाम	विवरण (Description)
px	Pixels	सबसे ज़्यादा उपयोग की जाने वाली unit। एक pixel screen के एक छोटे dot को दर्शाता है।
pt	Points	Typography (जैसे fonts) में इस्तेमाल होती है। 1pt = 1/72 inch।
cm	Centimeters	असली physical measurement दर्शाती है। Print design में काम आती है।
mm	Millimeters	cm की तरह ही, लेकिन और छोटी unit होती है।
in	Inches	1 inch = 2.54 cm के बराबर होती है। Print layout में सबसे accurate मानी जाती है।

Example:

h1 {
  font-size: 24pt;
}
div {
  width: 10cm;
}

ऊपर दिए गए code में font size और div की चौड़ाई को fixed physical units में define किया गया है,
इसलिए ये responsive नहीं होंगी — हर screen पर एक ही fixed आकार में दिखाई देंगी।

ध्यान देने योग्य बात:
Absolute units का उपयोग तब करें जब आपको किसी element का exact size चाहिए और design responsive न हो।
लेकिन अगर आप चाहते हैं कि आपकी website हर device पर अच्छी दिखे, तो relative units ज़्यादा बेहतर होती हैं।

---

Relative Measurement Units

Relative units वे होती हैं जिनका आकार किसी अन्य element या viewport (screen area) पर निर्भर करता है।
इनका सबसे बड़ा फायदा यह है कि ये responsive design बनाने में मदद करती हैं, यानी आपकी website हर screen size (mobile, tablet, laptop) पर सही दिखती है।

इनका उपयोग modern web design में बहुत ज़्यादा किया जाता है क्योंकि ये flexibility देती हैं और user experience को बेहतर बनाती हैं।

नीचे कुछ commonly used relative units और उनका अर्थ दिया गया है:

Unit	पूरा नाम	यह किस पर निर्भर करती है	विवरण (Description)
%	Percentage	Parent element	किसी property की value को उसके parent element के size के प्रतिशत के रूप में सेट करता है।
em	Element	Parent element का font-size	अगर parent font-size 16px है, तो 1em = 16px होगा।
rem	Root element	HTML (root) element का font-size	1rem हमेशा root font-size (जैसे 16px) के बराबर रहता है।
vw	Viewport Width	Browser की चौड़ाई	1vw = viewport की चौड़ाई का 1%।
vh	Viewport Height	Browser की ऊँचाई	1vh = viewport की ऊँचाई का 1%।

Example:

body {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* Root font-size का दोगुना */
}

div {
  width: 80vw; /* Browser width का 80% */
}

ऊपर दिए गए कोड में, units responsive हैं —
अगर screen का size बदलेगा, तो ये elements अपने size को उसी के अनुसार adjust करेंगे।

कब उपयोग करें:

• जब आपको responsive design बनाना हो।
• जब आप चाहते हैं कि text और layout हर device पर proportionate दिखे।
• Modern CSS में हमेशा relative units को प्राथमिकता दी जाती है।

---

इसे भी पढ़े –

• CSS Text Properties in Hindi – टेक्स्ट प्रॉपर्टीज क्या हैं?
• CSS Kya Hai in Hindi – Full Form, Types, Syntax और Example
• CSS Box Model in Hindi – CSS Box Model क्या है, Properties और पूरी जानकारी
• CSS Background Properties in Hindi – आसान भाषा में समझें

---

आपने क्या सीखा? – Conclusion

इस लेख में आपने CSS Measurement Units in Hindi के बारे में विस्तार से जाना।
हमने समझा कि CSS में दो मुख्य प्रकार की units होती हैं — Absolute Units और Relative Units।

Absolute Units जैसे px, cm, mm, pt आदि हमेशा fixed रहती हैं, यानी इनका आकार device या screen size बदलने पर भी नहीं बदलता।
जबकि Relative Units जैसे %, em, rem, vw, vh responsive होती हैं और parent element या viewport के अनुसार बदलती हैं।

अगर आप modern websites या responsive layouts बना रहे हैं, तो हमेशा relative units को प्राथमिकता दें।
ये आपकी site को हर device पर सही proportion में दिखाने में मदद करती हैं और user experience को बेहतर बनाती हैं।

संक्षेप में:

• Absolute Units → Fixed design के लिए
• Relative Units → Responsive design के लिए
• Smart developer वही है जो दोनों को सही जगह इस्तेमाल करना जानता हो

इस तरह आपने जाना कि CSS Measurement Units का सही उपयोग कैसे आपकी website की design quality को बेहतर बना सकता है।