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