CSS एब्सोल्यूट और रिलेटिव यूनिट्स समझना

CSS एब्सोल्यूट यूनिट्स

एब्सोल्यूट लेंथ यूनिट्स एक-दूसरे के सापेक्ष निश्चित होती हैं। ये यूनिट्स तब उपयोग की जाती हैं जब आउटपुट फॉर्मेट पहले से ज्ञात हो।

एब्सोल्यूट यूनिट्स तालिका:

क्रमांक	यूनिट और विवरण
1	cm - सेंटीमीटर
2	mm - मिलीमीटर
3	in - इंच (1in = 96px = 2.54cm)
4	px - पिक्सेल्स (1px = 1/96th of 1in)
5	pt - पॉइंट्स (1pt = 1/72 of 1in)
6	pc - पिकास (1pc = 12 pt)

उदाहरण: इंच यूनिट

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline underline;
  text-decoration-color: blue;
  font-size: 0.3in;
}
</style>
</head>
<body>
<h1>विवरण</h1>
<p class="demo">परीक्षा केंद्र ABC कॉलेज के पास।</p>
<p class="demo2">परीक्षा सुबह 9 बजे शुरू होती है।</p>
</body>
</html>

CSS रिलेटिव यूनिट्स

CSS में रिलेटिव लेंथ यूनिट्स किसी अन्य लेंथ प्रॉपर्टी के सापेक्ष लंबाई निर्दिष्ट करने के लिए उपयोग की जाती हैं।

रिलेटिव यूनिट्स तालिका:

क्रमांक	यूनिट और विवरण
1	em - एलिमेंट के font-size के सापेक्ष (4em = 4x वर्तमान फॉन्ट)
2	ex - वर्तमान फॉन्ट के x-height के सापेक्ष
3	ch - "0" (जीरो) की चौड़ाई के सापेक्ष
4	rem - रूट एलिमेंट (html) के font-size के सापेक्ष
5	vw - व्यूपोर्ट चौड़ाई का 1%
6	vh - व्यूपोर्ट ऊंचाई का 1%
7	vmin - व्यूपोर्ट के छोटे आयाम का 1%
8	vmax - व्यूपोर्ट के बड़े आयाम का 1%
9	% - पैरेंट एलिमेंट के सापेक्ष

उदाहरण 1: em यूनिट

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline underline;
  text-decoration-color: blue;
  font-size: 1.4em;
}
</style>
</head>
<body>
<h1>विवरण</h1>
<p class="demo">परीक्षा केंद्र ABC कॉलेज के पास।</p>
<p class="demo2">परीक्षा सुबह 9 बजे शुरू होती है।</p>
</body>
</html>

उदाहरण 2: ch यूनिट

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline underline;
  text-decoration-color: blue;
  font-size: 4ch;
}
</style>
</head>
<body>
<h1>विवरण</h1>
<p class="demo">परीक्षा केंद्र ABC कॉलेज के पास।</p>
<p class="demo2">परीक्षा सुबह 9 बजे शुरू होती है।</p>
</body>
</html>

रिलेटिव यूनिट्स तुलना:

यूनिट	संदर्भ	उपयोग मामला
em	पैरेंट font-size	कंपोनेंट स्केलिंग, पैडिंग/मार्जिन
rem	रूट (html) font-size	ग्लोबल टाइपोग्राफी, लेआउट (सर्वश्रेष्ठ)
ch	"0" की चौड़ाई	लाइन लंबाई सीमित करना (पठनीयता)
ex	x-height	फाइन-ट्यून वर्टिकल अलाइनमेंट
vw/vh	व्यूपोर्ट	फुल-स्क्रीन लेआउट, हीरो सेक्शन
vmin/vmax	व्यूपोर्ट मिन/मैक्स	रिस्पॉन्सिव टाइपोग्राफी
%	पैरेंट	चौड़ाई/ऊंचाई, फ्लेक्स/ग्रिड गैप्स

मॉडर्न बेस्ट प्रैक्टिस:

:root { font-size: 16px; }  /* बेस = 1rem */

body { font-size: 1rem; line-height: 1.5; }
h1 { font-size: clamp(2rem, 5vw, 4rem); }
.container { max-width: 70ch; margin: auto; }  /* पठनीय लाइन लंबाई */
.card { padding: 1.5rem; gap: 1rem; }  /* rem में स्पेसिंग */

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

rem: अधिकांश फॉन्ट साइज़, स्पेसिंग, लेआउट
em: कंपोनेंट-इंटरनल स्केलिंग (बटन पैडिंग, आदि)
ch: कंटेनर मैक्स-विड्थ (पठनीयता: 45-75ch)
vw/vh: फुल-स्क्रीन सेक्शन, हीरो
px: बॉर्डर, शैडो, मीडिया क्वेरी ब्रेकपॉइंट्स
%: फ्लेक्स/ग्रिड बच्चे, फ्लूइड चौड़ाई