CSS आकार इकाइयाँ (px rem em vh)
UI टाइपोग्राफ़ी के लिए rem चुनें; px केवल महीन बॉर्डर के लिए रखें।
| इकाई | किससे सापेक्ष | सामान्य उपयोग |
|---|---|---|
| px | डिवाइस पिक्सल (CSS पिक्सल) | बॉर्डर, सटीक आइकन |
| rem | रूट तत्व का फ़ॉन्ट साइज़ | टाइप स्केल, स्पेसिंग |
| em | पैरेंट का फ़ॉन्ट साइज़ | कंपोनेंट-लोकल साइज़िंग |
| % | पैरेंट प्रॉपर्टी | चौड़ाई, फ्लेक्सिबल लेआउट |
| vw | व्यूपोर्ट चौड़ाई का 1% | फुल-ब्लीड सेक्शन |
| vh | व्यूपोर्ट ऊँचाई का 1% | हीरो ऊँचाई (मोबाइल UI का ध्यान रखें) |
| vmin / vmax | व्यूपोर्ट का छोटा/बड़ा पक्ष | लगभग वर्गाकार रेस्पॉन्सिव साइज़ |
| ch | “0” ग्लिफ़ की चौड़ाई | कोड ब्लॉक, मोनोस्पेस फ़ील्ड |
| ex | फ़ॉन्ट की x-ऊँचाई | दुर्लभ सूक्ष्म टाइपोग्राफ़ी |
| svh / lvh / dvh | छोटा/बड़ा/डायनामिक व्यूपोर्ट | मोबाइल ब्राउज़र-सुरक्षित ऊँचाई |
टिप्पणियाँ
- मोबाइल पर 100vh में छिपा ब्राउज़र बार शामिल हो सकता है — समर्थन हो तो dvh/svh चुनें।
- उपयोगकर्ता का फ़ॉन्ट साइज़ rem को प्रभावित करता है — पहुँच के लिए यह अच्छा है।
सामान्य प्रश्न
- 1rem कितने px के बराबर है?
- 1rem रूट तत्व के फ़ॉन्ट साइज़ के बराबर है; डिफ़ॉल्ट 16px पर 1rem = 16px।
- em और rem में क्या अंतर है?
- rem हमेशा रूट फ़ॉन्ट साइज़ पर आधारित है, em वर्तमान तत्व को विरासत में मिले साइज़ पर।
- मोबाइल पर 100vh गलत क्यों होता है?
- मोबाइल ब्राउज़र एड्रेस बार छिपाते/दिखाते हैं, इसलिए 100vh दृश्य क्षेत्र से बड़ा हो सकता है; समर्थन हो तो dvh या svh लें।