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

द सीएसएस पॉडकास्ट - 008: साइज़ की इकाइयां

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

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

Numbers

rgb में नंबर का इस्तेमाल, opacity, line-height, और कलर चैनल की वैल्यू को तय करने के लिए भी किया जाता है. संख्याएं बिना इकाई के पूर्णांक (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 का इस्तेमाल किया जाता है और फिर प्रिंट किया जाता है, अगर आप इसकी तुलना किसी रूलर से करें, तो यह सटीक होना चाहिए.

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