सीएसएस इकाई
- पिछला पृष्ठ सीएसएस वेबसाइट लेआउट
- अगला पृष्ठ सीएसएस विशेषता
सीएसएस इकाई
CSS में कई प्रकार की लंबाई इकाई हैं।
कई CSS गुण लंबाई के मानों को स्वीकार करते हैं, जैसे width、margin、padding、font-size आदि।
लंबाई एक लंबाई इकाई के साथ अंक है, जैसे 10px、2em आदि।
उदाहरण
px (पिक्सल) के द्वारा अलग-अलग लंबाई मान निर्धारित करें:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
अंक और इकाई के बीच खाली जगह नहीं होनी चाहिए। लेकिन यदि वाल्यू 0 है, तो इकाई को छोड़ सकते हैं।
कुछ CSS गुणों के लिए सापेक्षिक लंबाई का उपयोग करने की अनुमति है।
लंबाई इकाई दो प्रकार की हैं:अभिन्न इकाईऔरसापेक्षिक इकाई।
अभिन्न लंबाई
अभिन्न लंबाई इकाई निश्चित हैं, जो भी अभिन्न लंबाई से प्रदर्शित किया जाएगा, उसका आकार बराबर होगा。
स्क्रीन पर अभिन्न लंबाई इकाई का उपयोग नहीं करना चाहिए क्योंकि स्क्रीन का आकार काफी बदलता है। लेकिन यदि आउटपुट मीडियम के बारे में ज्ञान है, तो इसे उपयोग किया जा सकता है, उदाहरण के लिए अच्छे प्रिंट लेआउट (print layout) के लिए。
| इकाई | वर्णन | TIY |
|---|---|---|
| cm | सेमीटर | सबसे आगे प्रयोग करें |
| mm | मिलीमीटर | सबसे आगे प्रयोग करें |
| in | इंच (1in = 96px = 2.54cm) | सबसे आगे प्रयोग करें |
| px * | पिक्सल (1px = 1/96th of 1in) | सबसे आगे प्रयोग करें |
| pt | पाइन्ट (1pt = 1/72 of 1in) | सबसे आगे प्रयोग करें |
| pc | पाइका (1pc = 12 pt) | सबसे आगे प्रयोग करें |
* पिक्सल (px) देखने वाले उपकरण के तुल्य है। निम्न dpi के उपकरण के लिए 1px एक डिस्प्ले पिक्सल (पॉइंट) है। प्रिंटर और उच्च रेज़ोल्यूशन स्क्रीन के लिए 1px कई डिस्प्ले पिक्सल के तुल्य है।
सापेक्षिक लंबाई
सापेक्षिक लंबाई इकाई सापेक्षिक लंबाई गुणक के तुल्य है। सापेक्षिक लंबाई इकाई भिन्न रेंडरिंग मीडियम के बीच फैलने के लिए बेहतर प्रदर्शन करती है।
| इकाई | वर्णन | TIY |
|---|---|---|
| em | एलीमेंट के फ़ॉन्ट-साइज़ (font-size) के तुल्य (2em मतलब वर्तमान फ़ॉन्ट-साइज़ का 2 गुणा) | सबसे आगे प्रयोग करें |
| ex | वर्तमान फ़ॉन्ट के x-height (कम से कम प्रयोग) | सबसे आगे प्रयोग करें |
| ch | 0 (शून्य) की चौड़ाई के तुल्य | सबसे आगे प्रयोग करें |
| rem | शीर्ष एलीमेंट के फ़ॉन्ट-साइज़ (font-size) के तुल्य | सबसे आगे प्रयोग करें |
| vw | साइज़ विहंगम की चौड़ाई के 1% | सबसे आगे प्रयोग करें |
| vh | साइज़ विहंगम की ऊंचाई के 1% | सबसे आगे प्रयोग करें |
| vmin | साइज़ विहंगम के 1% के तुल्य | सबसे आगे प्रयोग करें |
| vmax | व्यूपॉर्ट के * बड़े आकार के 1% के लिए | सबसे आगे प्रयोग करें |
| % | पैरेंट एलिमेंट के तुलना में | सबसे आगे प्रयोग करें |
सुझाव:em और rem इकाइयाँ सही स्केलेबल लेयउट के लिए इस्तेमाल की जा सकती हैं!
* व्यूपॉर्ट = ब्राउज़र विंडो का आकार।यदि व्यूपॉर्ट 50 सेंटीमीटर चौड़ा है, तो 1vw = 0.5 सेंटीमीटर।
ब्राउज़र समर्थन
तालिका में नंबर लंबाई इकाइयाँ पूर्ण समर्थन करने वाले पहले ब्राउज़र के संस्करण को निर्दिष्ट करते हैं।
| लंबाई इकाइयाँ | |||||
|---|---|---|---|---|---|
| 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 |
- पिछला पृष्ठ सीएसएस वेबसाइट लेआउट
- अगला पृष्ठ सीएसएस विशेषता
