आप वेब पेज बनाते समय पाठ के फ़ॉन्ट-आकार को अनुकूलित करने के लिए कुछ CSS इकाइयाँ सीखने जा रहे हैं। पीटी, पीसी, एक्स आदि जैसी कई इकाइयाँ हैं, लेकिन ज्यादातर मामलों में आपको तीन सबसे लोकप्रिय इकाइयों पर ध्यान देना चाहिए: पीएक्स, ईएम और रेम। कई डेवलपर्स आमतौर पर यह नहीं समझते हैं कि इन इकाइयों के बीच क्या अंतर है; इसलिए, नीचे इन इकाइयों का विस्तृत विवरण दिया गया है।
आगे बढ़ने से पहले, ध्यान दें कि इकाई लंबाई दो प्रकार की होती है: शुद्ध और रिश्तेदार.
निरपेक्ष लंबाई
निरपेक्ष लंबाई इकाइयाँ निश्चित हैं, और इनमें से किसी में व्यक्त की गई लंबाई ठीक उसी आकार की दिखाई देगी।
पूर्ण लंबाई इकाइयों को स्क्रीन पर उपयोग करने की अनुशंसा नहीं की जाती है, क्योंकि स्क्रीन आकार बहुत भिन्न होते हैं। हालाँकि, उनका उपयोग तब किया जा सकता है जब आउटपुट माध्यम ज्ञात हो, जैसे कि मुद्रित लेआउट के लिए।
| इकाई | विवरण |
|---|---|
| सेमी | सेंटीमीटर |
| मिमी | मिलीमीटर |
| में | इंच (1in = 96px = 2.54cm) |
| पीएक्स * | पिक्सेल (1px = 1in का 1/96वाँ) |
| पं | अंक (1pt = 1in का 1/72) |
| पीसी | पिकास (1pc = 12 पीटी) |
सापेक्ष लंबाई
सापेक्ष लंबाई इकाइयां किसी अन्य लंबाई संपत्ति के सापेक्ष लंबाई निर्दिष्ट करती हैं। विभिन्न रेंडरिंग माध्यमों के बीच सापेक्ष लंबाई इकाइयाँ बेहतर होती हैं।
| इकाई | के सापेक्ष |
|---|---|
| एम* | तत्व के फ़ॉन्ट-आकार से संबंधित (2em का अर्थ है वर्तमान फ़ॉन्ट के आकार का 2 गुना) |
| पूर्व | वर्तमान फ़ॉन्ट की x-ऊंचाई के सापेक्ष (शायद ही कभी उपयोग किया जाता है) |
| चौधरी | "0" (शून्य) की चौड़ाई के सापेक्ष |
| रेम* | मूल तत्व के फ़ॉन्ट-आकार से संबंधित |
| vw | व्यूपोर्ट की चौड़ाई के 1% के सापेक्ष* |
| वीएच | व्यूपोर्ट की ऊंचाई के 1% के सापेक्ष* |
| vmin | व्यूपोर्ट के 1%* छोटे आयाम के सापेक्ष |
| vmax | व्यूपोर्ट के 1%* बड़े आयाम के सापेक्ष |
| % | मूल तत्व के सापेक्ष |
1. पीएक्स (पिक्सेल)
पिक्सेल संभवतः CSS में सबसे अधिक उपयोग की जाने वाली इकाई है और जब वेबपृष्ठों पर पाठ के फ़ॉन्ट-आकार को सेट करने की बात आती है तो यह बहुत लोकप्रिय है। एक पिक्सेल (1px) को प्रिंट मीडिया में एक इंच के 1/96वें भाग के रूप में परिभाषित किया गया है।
हालाँकि, कंप्यूटर स्क्रीन पर, वे आमतौर पर वास्तविक माप जैसे सेंटीमीटर और इंच से संबंधित नहीं होते हैं जैसा कि आप सोच सकते हैं; उन्हें केवल छोटे लेकिन दृश्यमान के रूप में परिभाषित किया गया है। क्या दृश्यमान माना जाता है यह डिवाइस पर निर्भर है।
अलग-अलग उपकरणों की स्क्रीन पर प्रति इंच पिक्सेल की अलग-अलग संख्या होती है, जिसे पिक्सेल घनत्व के रूप में जाना जाता है। यदि आपने उस डिवाइस पर सामग्री के आकार को निर्धारित करने के लिए किसी डिवाइस की स्क्रीन पर भौतिक पिक्सेल की संख्या का उपयोग किया है, तो आपको सभी आकारों की स्क्रीन पर चीजों को समान बनाने में समस्या होगी।
यहीं पर डिवाइस पिक्सेल अनुपात आता है। यह अनिवार्य रूप से यह गणना करने का एक तरीका है कि डिवाइस की स्क्रीन पर एक CSS पिक्सेल (1px) कितनी जगह लेगा, जिससे यह किसी अन्य डिवाइस की तुलना में समान आकार का दिखाई देगा।
नीचे एक उदाहरण है:-
<डिव क्लास ="CONTAINER">
<डिव>
<एच 1>यह एक पैराग्राफ है</h1>
<पी>
लोरेम इप्सम, डोलर सिट एमेट कॉन्सेक्टेटुर एडिपिसिसिंग एलीट।
घटना को दोबारा दोहराएं
पर सर्वज्ञ! ऑफ़िसिस प्रेसेंटियम ऑफ़िसिया, निमो वेनियम परिणाम
नोस्ट्रम संट एलिक्विड इप्सम, कॉर्पोरिस क्वास क्वाराट। लोरेम इप्सम डोलर
सिट अमेट कॉन्सेक्टेटुर एडिपिसिसिंग एलीट। हिच क्वाम बीट वोलुप्टैटिबस
संभावित तरल डेबिट, ऑटेम के अंतर को रोकने की संभावना है
वेल उल्लाम ऑट, क्वॉड कॉर्पोरिस राशन और ड्यूसीमस डोलोरम।
</पी>
</div>
</div>
कंटेनर {
चौड़ाई: 100%;
ऊंचाई: 100 वीएच;
डिस्प्ले: फ्लेक्स;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
}
कंटेनरडिव {
अधिकतम-चौड़ाई: 500 पीएक्स;
पैडिंग: 5px 20px;
बॉर्डर: 1px ग्रे सॉलिड;
सीमा-त्रिज्या: 10px;
}
पी {
फ़ॉन्ट-आकार: 16 पीएक्स;
}आउटपुट
शीर्ष बॉक्स यह है कि यह लैपटॉप जैसी बड़ी स्क्रीन पर प्रदर्शित होने पर कैसा दिखता है, और निचला बॉक्स यह कैसा दिखता है जब एक छोटी स्क्रीन पर प्रदर्शित किया जाता है, जैसे फ़ोन.
ध्यान दें कि कैसे दोनों बक्सों में पाठ समान आकार का है, मूल रूप से पिक्सेल इसी तरह काम करता है। यह वेब सामग्री (सिर्फ पाठ नहीं) को उपकरणों पर समान आकार में देखने में मदद करता है।
2. एम (एम)
एम यूनिट को इसका नाम अपरकेस अक्षर 'एम' (ईएम) से मिला है क्योंकि अधिकांश सीएसएस इकाइयां टाइपोग्राफी से आती हैं। यह मूल तत्व के वर्तमान फ़ॉन्ट आकार को आधार के रूप में उपयोग करता है। इसका उपयोग माता-पिता से प्राप्त फ़ॉन्ट-आकार के आधार पर किसी तत्व के फ़ॉन्ट-आकार को बढ़ाने या घटाने के लिए किया जा सकता है।
मान लें कि आपके पास एक पैरेंट डिव है जिसका फ़ॉन्ट-आकार 16px है। यदि आप उस div में एक पैराग्राफ तत्व बनाते हैं और इसे 1em का फ़ॉन्ट-आकार देते हैं तो पैराग्राफ का फ़ॉन्ट-आकार 16px होगा।
हालाँकि, यदि आप एक और पैराग्राफ देते हैं तो 2em का फ़ॉन्ट-आकार जो 32px में अनुवाद करेगा। नीचे दिए गए उदाहरण पर विचार करें:
<डिव क्लास ="div-एक">
<पी वर्ग ="एक उन्हें">1 एम 10 पीएक्स पर आधारित है</पी>
<पी वर्ग ="दो-एम">10 पीएक्स पर आधारित 2 ईएम</पी>
</div>
<डिव क्लास ="div-दो">
<पी वर्ग ="एक उन्हें">1 एम 10 पीएक्स पर आधारित है</पी>
<पी वर्ग ="दो-एम">10 पीएक्स पर आधारित 2 ईएम</पी>
</div>
</div>
.div-एक {
फ़ॉन्ट-आकार: 15 पीएक्स;
}
.div-दो {
फ़ॉन्ट-आकार: 20 पीएक्स;
}
.एक-उन्हें {
फ़ॉन्ट आकार: 1em;
}
.दो-एम {
फ़ॉन्ट-आकार: 2em;
}आउटपुट
आप देख सकते हैं कि एम पाठ के आकार को कैसे बढ़ा सकता है और यह मूल कंटेनर से प्राप्त वर्तमान फ़ॉन्ट आकार से कैसे प्रभावित होता है। विशेष रूप से जटिल संरचित पृष्ठों के भीतर एम का उपयोग करने की सलाह नहीं दी जाती है।
यदि ठीक से उपयोग नहीं किया जाता है, तो आप स्केलिंग समस्याओं में भाग सकते हैं जहाँ DOM ट्री में आकारों की एक जटिल विरासत के आधार पर तत्वों को ठीक से आकार नहीं दिया जा सकता है।
3. रेम (रूट एम)
रेम एम के समान ही काम करता है, लेकिन मुख्य अंतर यह है कि रेम केवल पैरेंट के फॉन्ट-साइज के बजाय पृष्ठ पर मूल तत्व के फॉन्ट-साइज को संदर्भित करता है। रूट फॉन्ट-साइज डिफ़ॉल्ट फॉन्ट-साइज है जिसे या तो उपयोगकर्ता द्वारा उनकी ब्राउज़र सेटिंग्स में या आपके द्वारा, डेवलपर द्वारा निर्दिष्ट किया जाता है।
एक वेब ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट-आकार आमतौर पर 16px होता है इसलिए 1rem 16px होगा और 2rem 32px होगा। हालाँकि, ऐसे मामले में जहां रूट फ़ॉन्ट-आकार को 10px में बदल दिया जाता है, उदाहरण के लिए; 1rem 10px होगा और 2rem 20px होगा।
चीजों को स्पष्ट करने के लिए यहां एक उदाहरण दिया गया है:
<डिव क्लास ="div-एक">
<!-- ईएम-->
<पी वर्ग ="एक उन्हें">कंटेनर पर आधारित 1 em (40px)</पी>
<पी वर्ग ="दो-एम">कंटेनर पर आधारित 2 एम (40 पीएक्स)</पी>
<!-- रेम-->
<पी वर्ग ="एक-रेम">रूट पर आधारित 1 रेम (16px)</पी>
<पी वर्ग ="दो रेम">रूट पर आधारित 2 रेम (16px)</पी>
</div>
.div-एक {
फ़ॉन्ट-आकार: 40 पीएक्स;
}
.एक-उन्हें {
फ़ॉन्ट आकार: 1em;
}
.दो-एम {
फ़ॉन्ट-आकार: 2em;
}
.एक-रेम {
फ़ॉन्ट-आकार: 1रेम;
}
.दो-रेम {
फ़ॉन्ट-आकार: 2rem;
}
आउटपुट
जैसा कि आप देख सकते हैं, REM इकाइयों के साथ परिभाषित पैराग्राफ हमारे कंटेनर में घोषित फ़ॉन्ट आकार से पूरी तरह से अविचलित हैं और सख्ती से संबंधित हैं रूट फ़ॉन्ट आकार HTML तत्व चयनकर्ता में परिभाषित किया गया है।
पीएक्स बनाम। एम बनाम। रेम: कौन सी इकाई सबसे अच्छी है?
नेस्टेड तत्वों के एक जटिल पदानुक्रम होने की संभावना के कारण Em की अनुशंसा नहीं की जाती है। REM को आमतौर पर PX के विपरीत ब्राउज़र सेटिंग्स में निर्दिष्ट नए डिफ़ॉल्ट/आधार फ़ॉन्ट आकार के साथ उचित रूप से बढ़ाया जाता है। यह बताता है कि आपको अपने वेब पेजों पर टेक्स्ट सामग्री के साथ काम करते समय REM का उपयोग क्यों करना चाहिए। रेम दौड़ जीतता है। REM के साथ अपनी सामग्री को बेहतर ढंग से स्टाइल करना और स्केल करना आपकी साइट में फ़्लेयर जोड़ता है क्योंकि यह वेबसाइट निर्माताओं के लिए आदर्श है। आपकी सामग्री का ऑन-पॉइंट माप आपकी वेबसाइट के रंगरूप को निर्धारित करेगा, हालाँकि, आपको रचनात्मक होने की आवश्यकता होगी।
