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

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

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

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

संख्याएं

संख्याओं का इस्तेमाल 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%; 
}

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

अगर 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
• एमडीएन पर साइज़ और इकाइयां
• एम्स के बारे में सब कुछ
• प्रतिशत के बारे में जानकारी