उत्तरदायी डिजाइन: मार्कअप तत्वों के आकार को बनाए रखना

अनुकूली वेब डिज़ाइन तकनीकों में से एक मार्कअप तत्वों का आकार निर्धारित कर रहा है।
कंटेनर के आकार के प्रतिशत के रूप में उनमें से। जिससे ब्राउज़र विंडो को आकार देते समय सभी तत्वों का आनुपातिक आकार प्राप्त होता है। यदि केवल क्षैतिज आयाम निर्दिष्ट किए जाते हैं, जैसे पृष्ठ लेआउट के लिए, जब तत्वों को क्षैतिज रूप से सही ढंग से रखना महत्वपूर्ण है, तो हम स्पष्ट रूप से भविष्यवाणी कर सकते हैं कि तत्वों के वास्तविक क्षैतिज आकार क्या होंगे। हालांकि, हालांकि, शायद, हम उनके ऊर्ध्वाधर आयामों के बारे में अग्रिम रूप से कुछ नहीं कह सकते हैं (निश्चित रूप से, यदि ऊंचाइयों को स्पष्ट रूप से सेट नहीं किया गया है)। यहाँ से निम्नलिखित कार्य का अनुसरण किया जाता है - तत्वों के अनुपात को कैसे बनाए रखा जाए?

अभ्यास से एक सरल उदाहरण। पेज में तीन कॉलम होते हैं: लेफ्ट वर्टिकल मेन्यू, पिक्चर, राइट वर्टिकल मेन्यू।

खिड़की का आकार बदलते समय, चित्र को बाएं और दाएं मेनू के बीच के स्थान पर शेष (सिकुड़ना) चाहिए। बदले में, मेनू आइटम को वर्ग क्षेत्रों द्वारा दर्शाया जाना चाहिए, जो खिड़की के आकार बदलने पर वर्ग रहना चाहिए:



हम अपने पेज को दो अव्यवस्थित सूचियों और बीच में एक छवि के साथ दर्शा सकते हैं:

<ul class="left-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul> <div class="picture"> <img src="img/fox.jpg"> </div> <ul class="right-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul> 

सूचियों की चौड़ाई को 4% पर सेट करना:

 .left-navigation, .right-navigation { width: 4%; list-style: none; float: left; padding-left: 0; margin: 0; } .right-navigation { float: right; } .left-navigation li, .right-navigation li { border: 1px solid black; cursor: pointer; } 

और चित्र 92%:

 .picture { box-sizing: border-box; padding: 30px; width: 92%; float: left; } .picture img { width: 100%; } 

परिणामस्वरूप, पृष्ठ इस तरह दिखेगा:



हालाँकि, विंडो के आकार बदलने पर छवि और मेनू का आकार बदल जाएगा
यह देखा जा सकता है कि मेनू आइटम वर्ग नहीं हैं। यह स्वाभाविक है, क्योंकि हम सभी ने मेनू की चौड़ाई को प्रतिशत के रूप में निर्धारित किया था, जिससे रेंडरिंग एल्गोरिथम की दया पर वस्तुओं की ऊंचाई की स्थापना हो गई।

बेशक, आप मेनू आइटम के आयामों को स्पष्ट रूप से पूर्ण इकाइयों में सेट कर सकते हैं। वे वांछित वर्ग आकार प्राप्त करेंगे, लेकिन लेआउट अनुकूली गुण खो देगा। केवल ऊंचाई को प्रतिशत के रूप में इंगित करें:

 width: 4%; height: 4%; 

यह भी एक समाधान नहीं है, क्योंकि मूल तत्व की चौड़ाई और ऊंचाई (और हमारे मामले में यह शरीर है) आमतौर पर समान नहीं हैं।

इस समस्या का समाधान कुछ हद तक विरोधाभासी तथ्य पर आधारित है जो मार्कअप तत्व के अंदर पैडिंग करता है, यदि प्रतिशत के रूप में व्यक्त किया जाता है, तो इस तत्व की चौड़ाई के सापेक्ष गणना की जाती है। विरोधाभास यह है कि यह कथन न केवल क्षैतिज संकेत के लिए सच है:

 padding-left, padding-right 

, लेकिन यह भी ऊर्ध्वाधर खरोज:

 padding-top, padding-bottom 

अगली चीज़ जो हमें चाहिए वह है :: छद्म चयनकर्ता के बाद। यह चौड़ाई में फैले हमारे तत्व के अंदर एक शून्य-ऊंचाई छद्म तत्व जोड़ देगा। यदि हम इस छद्म तत्व में पैडिंग-टॉप या पैडिंग-बॉटम को 100% पर सेट करते हैं, तो इंडेंट वैल्यू पैरेंट की चौड़ाई (स्ट्रेच्ड एलिमेंट, ली) के बराबर सेट की जाएगी।

 .left-navigation li:after, .right-navigation li:after { content: ''; display: block; padding-bottom: 100%; } 

नतीजतन, फैला हुआ तत्व की ऊंचाई इसकी चौड़ाई के बराबर हो जाएगी और मेनू आइटम चौकोर हो जाएंगे:



मेनू आइटम के अंदर सामग्री जोड़ने के लिए, हम पूर्ण स्थिति का उपयोग करते हैं:

 .left-navigation li a, .right-navigation li a { position: absolute; margin-left: 2%; margin-top: 2%; } .left-navigation li a img, .right-navigation li a img{ transform: translate(-50%, -50%); } 

परिणामस्वरूप, पृष्ठ वांछित रूप लेगा:



और सबसे महत्वपूर्ण बात, विंडो के आकार बदलने पर मेनू आइटम वर्गाकार रहेंगे।