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

सीएसएस पॉडकास्ट - 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 में 24px का font-size है, तो लाइन की ऊंचाई का हिसाब 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 का इस्तेमाल किया है और फिर उसे प्रिंट किया है, तो उसकी तुलना एक रूलर से करने पर, आपको सटीक साइज़ दिखेगा. ध्यान दें कि पिक्सल साइज़ में अंतर की वजह से, cm और in जैसी फ़िज़िकल यूनिट, स्क्रीन पर उन साइज़ में भरोसेमंद तरीके से नहीं दिखेंगी. प्रिंट स्टाइल शीट के लिए, फ़िज़िकल यूनिट का इस्तेमाल करना सबसे बेहतर होता है, क्योंकि वहां ये ज़्यादा भरोसेमंद होती हैं.

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
• एमडीएन पर साइज़ और यूनिट
• ईमेल के बारे में पूरी जानकारी
• प्रतिशत के बारे में जानकारी