सीएसएस इकाइयां
सीएसएस इकाइयां
लंबाई को व्यक्त करने के लिए CSS की कई अलग-अलग इकाइयाँ हैं।
कई CSS गुण "लंबाई" मान लेते हैं, जैसे width, margin, padding,
font-size, आदि।
लंबाई एक संख्या है जिसके बाद लंबाई इकाई होती है, जैसे 10px,
2emआदि।
उदाहरण
px (पिक्सेल) का उपयोग करके विभिन्न लंबाई मान सेट करें:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
नोट: संख्या और इकाई के बीच कोई रिक्त स्थान प्रकट नहीं हो सकता है। हालांकि, यदि मान है
0, तो इकाई को छोड़ा जा सकता है।
कुछ CSS गुणों के लिए, ऋणात्मक लंबाई की अनुमति है।
लंबाई इकाइयाँ दो प्रकार की होती हैं: निरपेक्ष और सापेक्ष ।
पूर्ण लंबाई
निरपेक्ष लंबाई की इकाइयाँ निश्चित होती हैं और इनमें से किसी में व्यक्त की गई लंबाई ठीक उसी आकार की दिखाई देगी।
स्क्रीन पर उपयोग के लिए पूर्ण लंबाई की इकाइयों की अनुशंसा नहीं की जाती है, क्योंकि स्क्रीन आकार बहुत भिन्न होते हैं। हालांकि, यदि आउटपुट माध्यम ज्ञात है, जैसे प्रिंट लेआउट के लिए उनका उपयोग किया जा सकता है।
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* पिक्सेल (पीएक्स) देखने वाले डिवाइस के सापेक्ष हैं। लो-डीपीआई डिवाइस के लिए, 1px डिस्प्ले का एक डिवाइस पिक्सेल (डॉट) होता है। प्रिंटर और उच्च रिज़ॉल्यूशन स्क्रीन के लिए 1px का अर्थ एकाधिक डिवाइस पिक्सेल है।
सापेक्ष लंबाई
सापेक्ष लंबाई इकाइयाँ किसी अन्य लंबाई संपत्ति के सापेक्ष लंबाई निर्दिष्ट करती हैं। विभिन्न प्रतिपादन माध्यमों के बीच सापेक्ष लंबाई इकाइयाँ बेहतर होती हैं।
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
युक्ति: एम और रेम इकाइयां पूरी तरह से स्केलेबल लेआउट बनाने में व्यावहारिक हैं!
* व्यूपोर्ट = ब्राउज़र विंडो का आकार। अगर व्यूपोर्ट 50cm चौड़ा है, तो 1vw = 0.5cm।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो लंबाई इकाई का पूर्ण समर्थन करता है।
| Length Unit | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |