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