प्रतिक्रियाशील वेब डिज़ाइन के कई छात्रों को चौड़ाई मानों के लिए प्रतिशत का उपयोग करने में कठिनाई होती है। विशेष रूप से, इस बात को लेकर भ्रम है कि ब्राउज़र उन प्रतिशतों की गणना कैसे करता है। नीचे आपको विस्तृत विवरण मिलेगा कि कैसे प्रतिशत एक प्रतिक्रियाशील वेबसाइट में चौड़ाई की गणना के लिए काम करते हैं।
चौड़ाई मान के लिए पिक्सेल का उपयोग करना
जब आप उपयोग करते हैं पिक्सल चौड़ाई मान के रूप में, परिणाम बहुत सीधे हैं। यदि तुम प्रयोग करते हो सीएसएस किसी दस्तावेज़ के शीर्षलेख में किसी तत्व की चौड़ाई मान को 100 पिक्सेल चौड़ा करने के लिए, वह तत्व होगा वही आकार जो आपने वेबसाइट की सामग्री या पाद लेख या पृष्ठ के अन्य क्षेत्रों में 100 पिक्सेल चौड़ा पर सेट किया है। पिक्सेल एक निरपेक्ष मान होते हैं, इसलिए 100 पिक्सेल 100 पिक्सेल होते हैं, चाहे आपके दस्तावेज़ में कोई भी तत्व दिखाई दे। दुर्भाग्य से, जबकि पिक्सेल मानों को समझना आसान है, वे प्रतिक्रियाशील वेबसाइटों के साथ अच्छी तरह से काम नहीं करते हैं।
एथन मार्कोटे ने coin शब्द गढ़ा "उत्तरदायी वेब डिज़ाइन", इस दृष्टिकोण को 3 प्रमुख प्रिंसिपलों के रूप में समझाते हुए:
- एक द्रव ग्रिड
- द्रव मीडिया
- मीडिया के प्रश्नों
वे पहले दो बिंदु, एक द्रव ग्रिड, और द्रव मीडिया, मूल्यों को आकार देने के लिए, पिक्सेल के बजाय प्रतिशत का उपयोग करके प्राप्त किए जाते हैं।
चौड़ाई मानों के लिए प्रतिशत का उपयोग करना
जब आप किसी तत्व के लिए चौड़ाई स्थापित करने के लिए प्रतिशत का उपयोग करते हैं, तो वास्तविक आकार जो तत्व प्रदर्शित करता है वह दस्तावेज़ में कहां है इसके आधार पर भिन्न होगा। प्रतिशत एक सापेक्ष मान है, जिसका अर्थ है कि प्रदर्शित आकार आपके दस्तावेज़ के अन्य तत्वों के सापेक्ष है।
उदाहरण के लिए, यदि आप an. की चौड़ाई निर्धारित करते हैं छवि 50% तक, इसका मतलब यह नहीं है कि छवि अपने सामान्य आकार के आधे पर प्रदर्शित होगी। यह एक आम धारणा है।
यदि कोई छवि वास्तव में ६०० पिक्सेल चौड़ी है, तो इसे ५०% पर प्रदर्शित करने के लिए CSS मान का उपयोग करने का यह अर्थ नहीं है कि यह वेब ब्राउज़र में ३०० पिक्सेल चौड़ी होगी। इस प्रतिशत मान की गणना उस तत्व के आधार पर की जाती है जिसमें वह छवि होती है, न कि छवि के वास्तविक आकार के आधार पर। यदि कंटेनर (जो एक विभाजन या कोई अन्य HTML तत्व हो सकता है) 1000 पिक्सेल चौड़ा है, तो छवि 500 पिक्सेल पर प्रदर्शित होगी क्योंकि यह मान कंटेनर की चौड़ाई का 50% है। यदि युक्त तत्व 400 पिक्सेल चौड़ा है, तो छवि केवल 200 पिक्सेल पर प्रदर्शित होगी, क्योंकि यह मान कंटेनर का 50% है। यहां विचाराधीन छवि का आकार 50% है जो पूरी तरह से उस तत्व पर निर्भर करता है जिसमें वह शामिल है।
याद रखें, उत्तरदायी डिजाइन तरल है। लेआउट और आकार के रूप में बदल जाएगा स्क्रीन आकार/डिवाइस में परिवर्तन. यदि आप इसके बारे में भौतिक, गैर-वेब शब्दों में सोचते हैं, तो यह एक गत्ते का डिब्बा रखने जैसा है जिसे आप पैकिंग सामग्री से भर रहे हैं। यदि आप कहते हैं कि बॉक्स उस सामग्री से आधा भरा होना चाहिए, तो आपके लिए आवश्यक पैकिंग की मात्रा बॉक्स के आकार के आधार पर अलग-अलग होगी। वेब डिज़ाइन में प्रतिशत चौड़ाई के लिए भी यही सच है।
अन्य प्रतिशत के आधार पर प्रतिशत
इमेज/कंटेनर उदाहरण में, हमने यह दिखाने के लिए कि रिस्पॉन्सिव इमेज कैसे प्रदर्शित होगी, हमने युक्त तत्व के लिए पिक्सेल मानों का उपयोग किया। वास्तव में, युक्त तत्व को प्रतिशत के रूप में भी सेट किया जाएगा और उस कंटेनर के अंदर की छवि, या अन्य तत्व, प्रतिशत के प्रतिशत के आधार पर अपना मान प्राप्त करेंगे।
यहाँ एक और उदाहरण है।
मान लें कि आपके पास एक ऐसी वेबसाइट है जहां पूरी साइट "कंटेनर" (एक सामान्य वेब डिज़ाइन अभ्यास) के एक वर्ग के साथ एक डिवीजन के भीतर समाहित है। उस डिवीजन के अंदर तीन अन्य डिवीजन हैं जिन्हें आप अंततः 3 लंबवत कॉलम के रूप में प्रदर्शित करने के लिए स्टाइल करेंगे।
अब, आप उस "कंटेनर" डिवीजन के आकार को 90% कहने के लिए CSS का उपयोग कर सकते हैं। इस उदाहरण में, कंटेनर डिवीजन में शरीर के अलावा कोई अन्य तत्व नहीं है जो इसे घेरे हुए है, जिसे हमने किसी विशिष्ट मान पर सेट नहीं किया है। डिफ़ॉल्ट रूप से, बॉडी ब्राउज़र विंडो के 100% के रूप में प्रस्तुत होगी। इसलिए, "कंटेनर" डिवीजन का प्रतिशत ब्राउज़र विंडो के आकार पर आधारित होगा। जैसे ही ब्राउज़र विंडो आकार में बदलती है, वैसे ही इस "कंटेनर" का आकार भी होगा। इसलिए यदि ब्राउज़र विंडो 2000 पिक्सेल चौड़ी है, तो यह विभाजन 1800 पिक्सेल पर प्रदर्शित होगा। इसकी गणना 2000 के 90-प्रतिशत (2000 x .90 = 1800)) के रूप में की जाती है, जो कि ब्राउज़र का आकार है।
यदि "कंटेनर" के भीतर पाए जाने वाले "कॉल" डिवीजनों में से प्रत्येक को 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)।
इसे और भी आगे ले जाते हुए, यदि इन "कॉल" डिवीजनों में से किसी एक के अंदर एक छवि थी और उस छवि को प्रतिशत का उपयोग करके आकार दिया गया था, तो इसके आकार का संदर्भ "कॉल" ही होगा। जैसे ही "कॉल" डिवीजन आकार में बदल गया, वैसे ही इसके अंदर की छवि भी बदल जाएगी। इसलिए यदि ब्राउज़र या "कंटेनर" का आकार बदल गया है, तो यह तीन "कॉल" डिवीजनों को प्रभावित करेगा, जो बदले में, "कॉल" के अंदर छवि का आकार बदलें। जैसा कि आप देख सकते हैं, जब प्रतिशत-संचालित आकार की बात आती है तो ये सभी जुड़े होते हैं मूल्य।
जब आप इस बात पर विचार करते हैं कि किसी वेब पेज के अंदर एक तत्व कैसे प्रस्तुत होगा जब इसकी चौड़ाई के लिए प्रतिशत मान का उपयोग किया जाता है, तो आपको उस संदर्भ को समझने की आवश्यकता होती है जिसमें वह तत्व पृष्ठ के मार्कअप में रहता है।
सारांश
प्रतिक्रियाशील वेबसाइटों के लिए लेआउट बनाने में प्रतिशत महत्वपूर्ण भूमिका निभाते हैं। चाहे आप छवियों को प्रतिक्रियात्मक रूप से आकार दे रहे हों या प्रतिशत चौड़ाई का उपयोग करके वास्तव में द्रव ग्रिड बना रहे हों जिसका आकार एक दूसरे के सापेक्ष हैं, इन गणनाओं को समझना आपके लिए आवश्यक होगा इच्छा।