अधिकांश डिज़ाइन लेआउट के लिए निश्चित मानों का उपयोग करने पर केंद्रित हैं: चौड़ाई और ब्लॉकों की ऊंचाई, फ़ॉन्ट आकार। यह देखने के पैमाने को बदलने और क्रॉस-ब्राउज़र संपत्ति को संरक्षित करने के लिए लेआउट को "अलग नहीं" करने की अनुमति देता है। हालांकि, एक बड़ा ऋण है - बड़े स्क्रीन रिज़ॉल्यूशन के साथ, छोटे फिक्स्ड ब्लॉक एक बड़े क्षेत्र में खो जाते हैं और किसी का ध्यान नहीं जाता है। यहां "रबर" लेआउट भी नहीं बचाएगा, क्योंकि उदाहरण के लिए, साइट और भी अपठनीय दिखाई देगी, उदाहरण के लिए, 19 '' चौड़ाई में 1280 से अधिक रिज़ॉल्यूशन के साथ मॉनिटर करता है। मेरे लिए, यह प्रासंगिक है, क्योंकि 1400x800 के एक संकल्प के साथ 17 '' लैपटॉप पर, "रबर" साइट को देखना बहुत असुविधाजनक है। और ऐसी साइट पर रहने की इच्छा जल्दी से गायब हो जाती है। क्या न केवल पाठ, बल्कि संपूर्ण साइट के पैमाने को नियंत्रित करने का एक तरीका है?

कार्य

पहली बात जो तुरंत दिमाग में आती है वह है ब्राउजर सेटिंग्स में जूम कंट्रोल। सौभाग्य से, अधिकांश आधुनिक ब्राउज़र IE6 और FireFox (आश्चर्यजनक रूप से) के अपवाद के साथ, इस सुविधा का समर्थन करते हैं। वे आपको केवल पाठ के पैमाने को नियंत्रित करने की अनुमति देते हैं, जबकि IE6 में फ़ॉन्ट आकार को px में निर्दिष्ट नहीं किया जाना चाहिए। सबसे बड़ा फ़ॉन्ट चुनते समय, हम इस तरह की समस्या का सामना करेंगे कि साइट बस "गिर जाएगी" और पूरी तरह से अपठनीय दिखाई देगी।



इस प्रकार, हमारा काम लोचदार को न केवल पाठ बनाना है, बल्कि इसके ब्लॉक भी हैं।

कार्यान्वयन

इलास्टिक टेम्पलेट की लेआउट विशेषता यह है कि सभी मान पिक्सेल (px) में निर्दिष्ट नहीं होने चाहिए और प्रतिशत के रूप में नहीं, बल्कि ईएमआई में ।

प्रतिशत का उपयोग अक्षम क्यों है? क्योंकि, सभी ब्राउज़रों द्वारा मूल्य के दसवें और सौवें हिस्से का उपयोग स्वीकार नहीं किया जाता है। जबकि em मानों के लिए आप 3 दशमलव स्थान निर्दिष्ट कर सकते हैं और प्रत्येक अंक को ध्यान में रखा जाएगा।



एम का उपयोग आपको किसी भी तत्व को लोचदार बनाने की अनुमति देता है और यह भूल जाता है कि कहीं न कहीं हमारा पाठ एक या दूसरे ब्लॉक की सीमा से परे "छोड़" सकता है। आप में से कई लोगों ने शायद पीएक्स से एम पर स्विच करने के तरीके पर लेख पढ़ा है। लेकिन, मुझे लगता है कि पुनरावृत्ति किसी को चोट नहीं पहुँचाएगी :)



यह ध्यान देने योग्य है कि एक लोचदार टेम्प्लेट बनाने के लिए बहुत सारे गणनाओं की आवश्यकता होगी, अर्थात्, सामान्य पिक्सल के अनुवाद को एम में। इसलिए, यह अपने आप को एक कैलकुलेटर के साथ उत्पन्न करने लायक है :)



डिफ़ॉल्ट रूप से, 1em फ़ॉन्ट आकार के बराबर है जिसे हम शरीर तत्व के लिए निर्दिष्ट करते हैं। यदि फ़ॉन्ट आकार निर्दिष्ट नहीं है, तो अधिकांश ब्राउज़र स्वचालित रूप से आकार को 16px पर सेट करते हैं, फिर 1em = 16px। यहाँ से:

0.5em = 8px

10em = 160px आदि।

और जैसा कि कई शायद पहले से ही जानते हैं: 0.625em (62.5%) = 10px। यह एक सुविधाजनक शुरुआती बिंदु है।



हम नियम लिखते हैं:

html{ font-size:100%; } /* IE*/

body{ background:#eee;

font-size: 0.625em;

font-family:Arial;

text-align:center}

अब 1em 10px के बराबर होगा।

Px को em में बदलने का सूत्र बहुत सरल होगा:



जहाँ, X को परिवर्तित करने के लिए px में मान है, और Y, em में संबंधित मान है।



क्योंकि यदि हम लोचदार को न केवल फ़ॉन्ट, बल्कि संपूर्ण सामग्री भी बनाना चाहते हैं, तो हमें मुख्य संरचनात्मक ब्लॉकों के फ़ॉन्ट आकार असाइनमेंट को छोड़ना होगा। इसका कारण यह है कि फ़ॉन्ट आकार को ब्लॉक में नियत करने के बाद, हमें उसकी चौड़ाई को एक भिन्न सूत्र के अनुसार पुनः आकलित करना होगा - मूल मान (10px) के आकार से नहीं, बल्कि इस ब्लॉक के फ़ॉन्ट आकार (12px) से। इसलिए, ब्लॉक के अंदर हम उदाहरण के लिए पी तत्व का उपयोग करेंगे।



अब आप संरचना से सीधे निपट सकते हैं, उदाहरण के लिए, यह:

"लोचदार" लेआउट का उदाहरण

लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिलेटिंग इलीट, सेड इइसमोड अस्थायी इनिडिडंट यूट लैबर एट डोलोर मैग्ना एलिका। यूट एनिम एड मिनिमम वेनियम, क्विस नॉस्ट्रुड एक्सरसाइज ullamco laboris nisi ut aliquip ex eaodo resultat। ड्यूस ऑटे यूरेअर डोलर रीप्लेन्ड्रिट इन वॉलपेक्टेट वेलिट एसेल सिलम डोलोर यूआर फुगिया नुल्ला पैराइटुर। असाधारण सिंट ऑवकासैट क्यूपिडैट नॉन प्रोसीडेंट, सिंटा इन गुंपा क्वि ऑफिसिया।

लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिलेटिंग इलीट, सेड इइसमोड अस्थायी इनिडिडंट यूट लैबर एट डोलोर मैग्ना एलिका। यूट एनिम एड मिनिमम वेनियम, क्विस नॉस्ट्रुड एक्सरसाइज ullamco laboris nisi ut aliquip ex eaodo resultat। ड्यूस ऑटे यूरेअर डोलर रीप्लेन्ड्रिट इन वॉलपेक्टेट वेलिट एसेल सिलम डोलोर यूआर फुगिया नुल्ला पैराइटुर। असाधारण सिंट ऑवकासैट क्यूपिडैट नॉन प्रोसीडेंट, सिंटा इन गुंपा क्वि ऑफिसिया।

हमें एच 1, पी, आईएमजी और रैप ब्लॉक के लिए नियमों को लिखने की आवश्यकता है। बाद के लिए, चौड़ाई को 600px पर सेट करें, पहले इसे em में अनुवाद करते हुए:

600px / 10 = 60em।

#wrap{

width: 60em;

margin: 1.5em auto; /* 15px/10 =1.5em*/

border: 0.1em solid #ccc; /* 1px/10 =0.1em*/

background: #fff;

text-align: left;

}

शीर्ष के लिए, 16px के बराबर फ़ॉन्ट आकार और पैराग्राफ 12px के लिए असाइन करें

h1{

font-size: 1.6em; /* 16px/10 =1.6em*/

margin: 0.833em; /* 10px/16 =0.833em*/

font-weight: 300;

}



p{

font-size: 1.2em;

line-height: 1.333em; /* 16px/12 =1.33em*/

margin-bottom: 1.25em; /* 15px/12 =1.25em*/

}

यह भी मत भूलो कि चित्रों के आयामों को अब उन्हें एम में निर्दिष्ट करने की आवश्यकता है। लेकिन यह कोई समस्या नहीं है जब परिवर्तन सूत्र इतना सरल है। निम्नलिखित तत्वों को img तत्व को निर्दिष्ट करें:

img {

width: 8.333em; /* 100px/12 =8.33em 12 – p*/

height: 8.333em;

margin:0 0.833em 0.833em 0; /* 10px/12 =0.833em*/

}

उदाहरण देखें

परिणाम

उदाहरण 2 ब्लॉक दिखाता है। निचले एक px में हमारे सामान्य लेआउट का एक उदाहरण है। हालाँकि, आप केवल IE और फ़ायर्फ़ॉक्स में अंतर देखेंगे, जैसा कि ओपेरा दोनों प्रकार के उदाहरणों के लिए समान रूप से ज़ूमिंग प्रदर्शित करेगा।



सबसे बड़ा फ़ॉन्ट स्केल





सबसे छोटा फ़ॉन्ट आकार



जैसा कि आप देख सकते हैं, लोचदार लेआउट के फायदे स्पष्ट हैं। अब न केवल पाठ को स्केल किया गया है, बल्कि पूरे ब्लॉक को भी बनाया गया है, जिससे हमने ओपेरा और IE7 में स्केलिंग फ़ंक्शन के समान कुछ बनाया है। तो, अब आप आसानी से साइट के लिए एक पूरी तरह से लोचदार टेम्पलेट बना सकते हैं, जो निश्चित मूल्यों पर निर्भर नहीं करेगा। यह हमें न केवल पाठ के पैमाने को नियंत्रित करने की अनुमति देगा, बल्कि आईई और फायरफॉक्स में समग्र रूप से साइट।



बेशक, हर कोई कैलकुलेटर के साथ बैठना नहीं चाहता और गणना पर समय बिताता है। लेकिन अगर प्रारंभिक कार्य की आवश्यकता होती है, तो, मुझे आशा है, मेरा उदाहरण आपके लिए उपयोगी होगा।



जॉन टैन गेरिन के माध्यम से