जानें कि कैसे वेब ब्राउज़र प्रतिशत मानों का उपयोग करके प्रदर्शन निर्धारित करते हैं
उत्तरदायी वेब डिज़ाइन के कई छात्रों को चौड़ाई मानों के प्रतिशतों का उपयोग करना मुश्किल समय होता है। विशेष रूप से, इस बात पर भ्रम है कि ब्राउजर उन प्रतिशतों की गणना कैसे करता है। नीचे आपको उत्तरदायी वेबसाइट में चौड़ाई की गणना के लिए प्रतिशत कैसे काम करते हैं, इसकी एक विस्तृत व्याख्या मिलेगी।
चौड़ाई मानों के लिए पिक्सेल का उपयोग करना
जब आप चौड़ाई मान के रूप में पिक्सल का उपयोग करते हैं, तो परिणाम बहुत सरल होते हैं। यदि आप किसी दस्तावेज़ के शीर्षलेख में किसी तत्व के चौड़ाई मान को 100 पिक्सेल चौड़े तक सेट करने के लिए सीएसएस का उपयोग करते हैं, तो वह तत्व उसी आकार के समान होगा जो आपने वेबसाइट की सामग्री या पाद लेख या अन्य क्षेत्रों में 100 पिक्सेल चौड़े पर सेट किया है पृष्ठ। पिक्सल एक पूर्ण मूल्य हैं, इसलिए 100 पिक्सल 100 पिक्सल हैं, इससे कोई फर्क नहीं पड़ता कि आपके दस्तावेज़ में कोई तत्व दिखाई देता है। दुर्भाग्यवश, जबकि पिक्सेल मानों को समझना आसान है, वे उत्तरदायी वेबसाइटों में अच्छी तरह से काम नहीं करते हैं।
एथन मार्कोटे ने इस शब्द को "उत्तरदायी वेब डिज़ाइन" बनाया, जिसमें 3 प्रमुख प्रधानाचार्य शामिल थे:
- एक द्रव ग्रिड
- द्रव मीडिया
- मीडिया के प्रश्नों
उन पहले दो बिंदुओं, तरल पदार्थ ग्रिड और तरल पदार्थ, मूल्यों का आकार बदलने के लिए, पिक्सल की बजाय प्रतिशत का उपयोग करके हासिल किए जाते हैं।
चौड़ाई मूल्यों के लिए प्रतिशत का उपयोग करना
जब आप तत्व के लिए चौड़ाई स्थापित करने के लिए प्रतिशत का उपयोग करते हैं, तो उस तत्व का वास्तविक आकार उस पर निर्भर करता है कि यह दस्तावेज़ में कहां है। प्रतिशत एक सापेक्ष मूल्य हैं, जिसका अर्थ है कि प्रदर्शित आकार आपके दस्तावेज़ के अन्य तत्वों के सापेक्ष है।
उदाहरण के लिए, यदि आप किसी छवि की चौड़ाई 50% पर सेट करते हैं, तो इसका मतलब यह नहीं है कि छवि अपने सामान्य आकार के आधे हिस्से में प्रदर्शित होगी। यह एक आम धारणा है।
यदि कोई छवि 600 पिक्सल चौड़ी है, तो इसे 50% पर प्रदर्शित करने के लिए एक सीएसएस मान का उपयोग करने का मतलब यह नहीं है कि यह वेब ब्राउज़र में 300 पिक्सल चौड़ा होगा। यह प्रतिशत मान उस तत्व के आधार पर गणना की जाती है जिसमें उस छवि को शामिल किया गया है, न कि छवि का मूल आकार। यदि कंटेनर (जो एक विभाजन या कुछ अन्य HTML तत्व हो सकता है) 1000 पिक्सेल चौड़ा है, तो छवि 500 पिक्सेल पर प्रदर्शित होगी क्योंकि यह मान कंटेनर की चौड़ाई का 50% है। यदि युक्त तत्व 400 पिक्सल चौड़ा है, तो छवि केवल 200 पिक्सल पर प्रदर्शित होगी, क्योंकि यह मान कंटेनर का 50% है। यहां प्रश्न में छवि का 50% आकार है जो उस तत्व पर निर्भर करता है जिसमें यह शामिल है।
याद रखें, उत्तरदायी डिजाइन द्रव है। स्क्रीन आकार / डिवाइस में परिवर्तन के रूप में लेआउट और आकार बदल जाएंगे। यदि आप भौतिक, गैर-वेब शर्तों में इसके बारे में सोचते हैं, तो यह एक कार्डबोर्ड बॉक्स जैसा है जिसे आप पैकिंग सामग्री भर रहे हैं। यदि आप कहते हैं कि बॉक्स उस सामग्री से आधा भरा होना चाहिए, तो आपको पैकिंग की मात्रा बॉक्स के आकार के आधार पर अलग-अलग होगी। यह वेब डिज़ाइन में प्रतिशत चौड़ाई के लिए भी सच है।
अन्य प्रतिशत के आधार पर प्रतिशत
छवि / कंटेनर उदाहरण में, मैंने युक्त तत्व के लिए पिक्सेल मानों का उपयोग यह दिखाने के लिए किया कि उत्तरदायी छवि कैसे प्रदर्शित होगी। हकीकत में, युक्त तत्व को प्रतिशत पर भी सेट किया जाएगा और छवि, या अन्य तत्व, उस कंटेनर के अंदर प्रतिशत के प्रतिशत के आधार पर उनके मान प्राप्त करेंगे।
यहां एक और उदाहरण है जो इसे अभ्यास में दिखाता है।
मान लें कि आपके पास ऐसी वेबसाइट है जहां पूरी साइट "कंटेनर" (एक सामान्य वेब डिज़ाइन अभ्यास) की कक्षा के साथ एक प्रभाग में निहित है। उस विभाजन के अंदर तीन अन्य डिवीजन हैं जिन्हें आप अंततः 3 लंबवत कॉलम के रूप में प्रदर्शित करने के लिए शैली देंगे। वह HTML इस तरह दिख सकता है:
अब, आप उस "कंटेनर" डिवीजन के आकार को 90% कहने के लिए सीएसएस का उपयोग कर सकते हैं। इस उदाहरण में, कंटेनर डिवीजन में कोई अन्य तत्व नहीं है जो शरीर के अलावा अन्य चारों ओर घिरा हुआ है, जिसे हमने किसी विशिष्ट मान पर सेट नहीं किया है। डिफ़ॉल्ट रूप से, शरीर ब्राउज़र विंडो के 100% के रूप में प्रस्तुत करेगा। इसलिए, "कंटेनर" विभाजन का प्रतिशत ब्राउज़र विंडो के आकार पर आधारित होगा। चूंकि ब्राउज़र विंडो आकार में बदलती है, इसलिए इस "कंटेनर" का आकार भी होगा। तो यदि ब्राउज़र विंडो 2000 पिक्सेल चौड़ी है, तो यह विभाजन 1800 पिक्सल पर प्रदर्शित होगा। इसकी गणना 2000 के 2000 प्रतिशत (2000 x .90 = 1800) के रूप में की जाती है, जो ब्राउज़र का आकार है।
यदि "कंटेनर" के भीतर पाए गए "col" डिवीजनों में से प्रत्येक को 30% के आकार में सेट किया गया है, तो उनमें से प्रत्येक इस उदाहरण में 540 पिक्सल चौड़ा होगा। यह 1800 पिक्सेल के 30% के रूप में गणना की जाती है जिसे कंटेनर (1800 x .30 = 540) पर प्रस्तुत करता है। अगर हमने उस कंटेनर का प्रतिशत बदल दिया है, तो इन आंतरिक डिवीजनों में वे आकार भी बदलेंगे जो वे प्रस्तुत करते हैं क्योंकि वे उस तत्व पर निर्भर हैं।
आइए मान लें कि ब्राउज़र विंडोज 2000 पिक्सल चौड़ी है, लेकिन हम कंटेनर का प्रतिशत मान 90% के बजाय 80% में बदलते हैं। इसका मतलब है कि यह अब 1600 पिक्सेल चौड़े (2000 x .80 = 1600) पर प्रस्तुत करेगा। यहां तक कि अगर हम अपने 3 "कोले" डिवीजनों के आकार के लिए सीएसएस नहीं बदलते हैं, और उन्हें 30% पर छोड़ देते हैं, तो वे अब उनके तत्व के बाद अलग-अलग प्रस्तुत करेंगे, जो संदर्भ है कि उनका आकार बदल गया है, बदल गया है। वे 3 डिवीजन अब 480 पिक्सल चौड़े के रूप में प्रस्तुत करेंगे, जो 1600 का 30% है, या कंटेनर का आकार (1600 x .30 = 480)।
इसे और भी आगे ले जाना, अगर इन "कोले" डिवीजनों में से एक के अंदर कोई छवि थी और उस छवि का प्रतिशत उपयोग करके आकार दिया गया था, तो इसका आकार बदलने का संदर्भ "कोल" होगा। चूंकि "कोल" विभाजन आकार में बदल गया, तो इसके अंदर की छवि भी होगी। तो यदि ब्राउज़र का आकार या "कंटेनर" बदल गया है, तो यह तीन "कॉल" डिवीजनों को प्रभावित करेगा, जो बदले में "रंग" के अंदर छवि के आकार को बदल देगा। जैसा कि आप देख सकते हैं, ये सभी जुड़े हुए हैं यह प्रतिशत संचालित आकार के मूल्यों की बात आती है।
जब आप इस बात पर विचार करते हैं कि किसी वेब पेज के अंदर कोई तत्व किस प्रकार रेंडर के लिए उपयोग किया जाता है, तो उस संदर्भ को समझने की आवश्यकता होती है जिसमें वह तत्व पृष्ठ के मार्कअप में रहता है।
संक्षेप में
उत्तरदायी वेबसाइटों के लिए लेआउट बनाने में प्रतिशत महत्वपूर्ण भूमिका निभाते हैं। चाहे आप प्रतिक्रियाशील रूप से छवियों का आकार बदल रहे हों या वास्तव में द्रव ग्रिड बनाने के लिए प्रतिशत चौड़ाई का उपयोग कर रहे हों, जिनके आकार एक दूसरे के सापेक्ष हैं, इन गणनाओं को समझने के लिए आवश्यक इच्छाओं को प्राप्त करने के लिए आवश्यक होगा।