साइज़ बदलने वाली यूनिट

सीएसएस पॉडकास्ट - 008: साइज़िंग यूनिट

वेब एक रिस्पॉन्सिव मीडियम है, लेकिन कभी-कभी आप इंटरफ़ेस की क्वालिटी को बेहतर बनाने के लिए, इसके डाइमेंशन को कंट्रोल करना चाहते हैं. इसका एक अच्छा उदाहरण है, पढ़ने में आसानी के लिए लाइन की लंबाई को सीमित करना. वेब जैसे आसान प्लैटफ़ॉर्म पर ऐसा कैसे किया जा सकता है?

इस मामले में, ch यूनिट का इस्तेमाल किया जा सकता है, जो रेंडर किए गए फ़ॉन्ट में "0" वर्ण की चौड़ाई के बराबर होती है. यह तय किए गए साइज़ के हिसाब से होता है. इस यूनिट की मदद से, टेक्स्ट की चौड़ाई को किसी ऐसी यूनिट से सीमित किया जा सकता है जिसे टेक्स्ट का साइज़ तय करने के लिए डिज़ाइन किया गया है. इससे, टेक्स्ट के साइज़ के बावजूद, उसे कंट्रोल किया जा सकता है. ch यूनिट, उन कुछ यूनिट में से एक है जो इस उदाहरण जैसे खास संदर्भों के लिए मददगार होती हैं.

Numbers

संख्याओं का इस्तेमाल opacity, line-height, और rgb में कलर चैनल की वैल्यू तय करने के लिए भी किया जाता है. संख्याएं, यूनिट के बिना पूर्णांक (1, 2, 3, 100) और दशमलव (.1, .2, .3) होती हैं.

कॉन्टेक्स्ट के आधार पर संख्याओं का मतलब होता है. उदाहरण के लिए, line-height तय करते समय, अगर किसी संख्या को मापने की इकाई के बिना तय किया जाता है, तो वह संख्या किसी अनुपात को दिखाती है:

p {
  font-size: 24px;
  line-height: 1.5;
}

इस उदाहरण में, 1.5, p एलिमेंट के कंप्यूट किए गए पिक्सल के फ़ॉन्ट साइज़ के 150% के बराबर है. इसका मतलब है कि अगर p का font-size 24px है, तो लाइन की ऊंचाई का हिसाब 36px के तौर पर लगाया जाएगा.

नंबरों का इस्तेमाल इन जगहों पर भी किया जा सकता है:

• फ़िल्टर के लिए वैल्यू सेट करते समय: filter: sepia(0.5), एलिमेंट पर 50% सेपिया फ़िल्टर लागू करता है.
• ओपैसिटी सेट करते समय: opacity: 0.5, 50% ओपैसिटी लागू करता है.
• कलर चैनलों में: rgb(50, 50, 50), जहां कलर वैल्यू सेट करने के लिए, 0-255 वैल्यू का इस्तेमाल किया जा सकता है. रंगों के बारे में जानकारी देने वाला लेसन देखें.
• किसी एलिमेंट को बदलने के लिए: transform: scale(1.2), एलिमेंट को उसके शुरुआती साइज़ के 120% तक स्केल करता है.

प्रतिशत

सीएसएस में प्रतिशत का इस्तेमाल करते समय, आपको यह जानना होगा कि प्रतिशत का हिसाब कैसे लगाया जाता है. उदाहरण के लिए, width का हिसाब, पैरंट एलिमेंट में उपलब्ध चौड़ाई के प्रतिशत के तौर पर लगाया जाता है.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

ऊपर दिए गए उदाहरण में, div p की चौड़ाई 150px है. ऐसा इसलिए है, क्योंकि लेआउट में डिफ़ॉल्ट box-sizing: content-box का इस्तेमाल किया गया है.

अगर margin या padding को प्रतिशत के तौर पर सेट किया जाता है, तो वे पैरंट एलिमेंट की चौड़ाई का हिस्सा होंगे.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

ऊपर दिए गए स्निपेट में, margin-top और padding-left, दोनों का हिसाब 150px के तौर पर लगाया जाएगा.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

अगर transform वैल्यू को प्रतिशत के तौर पर सेट किया जाता है, तो यह ट्रांसफ़ॉर्म सेट वाले एलिमेंट पर आधारित होता है. इस उदाहरण में, p की translateX वैल्यू 10% और width की वैल्यू 50% है. सबसे पहले, यह हिसाब लगाएं कि चौड़ाई कितनी होगी: 150px, क्योंकि यह पैरंट की चौड़ाई का 50% है. इसके बाद, 150px में से 10% लें, जो कि 15px है.

डाइमेंशन और लंबाई

किसी संख्या में इकाई जोड़ने पर, वह डाइमेंशन बन जाता है. उदाहरण के लिए, 1rem एक डाइमेंशन है. इस संदर्भ में, किसी संख्या से जुड़ी इकाई को स्पेसिफ़िकेशन में डाइमेंशन टोकन कहा जाता है. लंबाई, डाइमेंशन होते हैं जो दूरी के बारे में बताते हैं. ये ऐब्सोल्यूट या रिलेटिव हो सकते हैं.

एब्सोल्यूट लंबाई

सभी लम्बाई को एक ही आधार पर फ़िल्टर किया जाता है जिससे उनका अनुमान लगाया जा सकता है, भले ही उनका इस्तेमाल आपकी सीएसएस में किया जाए. उदाहरण के लिए, अगर आपने अपने एलिमेंट का साइज़ तय करने के लिए cm का इस्तेमाल किया है और फिर उसे प्रिंट किया है, तो उसकी तुलना एक रूलर से करने पर, आपको सटीक साइज़ दिखेगा.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

अगर आपने इस पेज को प्रिंट किया था, तो div 10x5 सेंटीमीटर के काले रेक्टैंगल के तौर पर प्रिंट होगा. ध्यान रखें कि सीएसएस का इस्तेमाल सिर्फ़ डिजिटल कॉन्टेंट के लिए नहीं, बल्कि प्रिंट कॉन्टेंट को स्टाइल देने के लिए भी किया जाता है. प्रिंट के लिए डिज़ाइन करते समय, ऐब्सलूट लंबाई वाली फ़ोटो काफ़ी कारगर साबित हो सकती हैं.

रिलेटिव लंबाई

तुलनात्मक लंबाई की गणना आधार मान के आधार पर की जाती है, जो प्रतिशत की तरह ही होती है. इनके और प्रतिशत में यह अंतर होता है कि एलिमेंट के साइज़ को कॉन्टेक्स्ट के हिसाब से सेट किया जा सकता है. इसका मतलब है कि सीएसएस में ch जैसी यूनिट होती हैं, जो टेक्स्ट साइज़ को आधार के तौर पर इस्तेमाल करती हैं और vw, जो व्यूपोर्ट (आपकी ब्राउज़र विंडो) की चौड़ाई पर आधारित होती है. रिस्पॉन्सिव होने की वजह से, वेब पर रिलेटिव लंबाई का इस्तेमाल करना खास तौर पर फ़ायदेमंद होता है.

फ़ॉन्ट-साइज़ की मिलती-जुलती इकाइयां

सीएसएस, रेंडर किए गए टाइपोग्राफ़ी के एलिमेंट के साइज़ के हिसाब से मददगार यूनिट उपलब्ध कराती है. जैसे, टेक्स्ट का साइज़ (em यूनिट) या टाइपफ़ेस के वर्णों की चौड़ाई (ch यूनिट).

व्यूपोर्ट के हिसाब से इकाइयां

आपके पास व्यूपोर्ट (ब्राउज़र विंडो) के डाइमेंशन का इस्तेमाल, रिलेटिव बेसिस के तौर पर करने का विकल्प है. ये यूनिट, व्यूपोर्ट के उपलब्ध स्पेस को बांटती हैं.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

इस उदाहरण में, div व्यूपोर्ट की चौड़ाई का 10% होगा, क्योंकि 1vw व्यूपोर्ट की चौड़ाई का 1% है. p एलिमेंट का max-width 60ch है इसका मतलब है कि यह एलिमेंट, कैलकुलेट किए गए फ़ॉन्ट और साइज़ में 60 "0" वर्णों से ज़्यादा चौड़ा नहीं हो सकता.

अन्य इकाइयां

कुछ अन्य इकाइयां भी हैं, जिन्हें खास तरह की वैल्यू के साथ इस्तेमाल करने के लिए तय किया गया है.

ऐंगल की इकाइयां

रंग मॉड्यूल में, हमने ऐंगल यूनिट पर गौर किया. ये डिग्री वैल्यू, जैसे कि hsl का रंग तय करने में मदद करती हैं. ये ट्रांसफ़ॉर्म फ़ंक्शन में एलिमेंट को घुमाने के लिए भी काम के होते हैं.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

deg ऐंगल यूनिट का इस्तेमाल करके, div को उसके सेंटर ऐक्सिस पर 90° घुमाया जा सकता है.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

रिज़ॉल्यूशन की इकाइयां

पिछले उदाहरण में, min-resolution की वैल्यू 192dpi है. dpi इकाई का मतलब डॉट प्रति इंच होता है. इसके लिए, बहुत ज़्यादा रिज़ॉल्यूशन वाली स्क्रीन का पता लगाना एक काम का कॉन्टेक्स्ट है. जैसे, मीडिया क्वेरी में रेटिना डिसप्ले और ज़्यादा रिज़ॉल्यूशन वाली इमेज दिखाना.

देखें कि आपको क्या समझ आया

साइज़ बदलने के बारे में अपनी जानकारी को परखें

संसाधन

• सीएसएस स्पेसिफ़िकेशन की वैल्यू और यूनिट लेवल 4
• एमडीएन पर साइज़ और यूनिट
• ईमेल के बारे में पूरी जानकारी
• प्रतिशत के बारे में जानकारी