उत्तरदायी वेब डिज़ाइन - ग्रिड-व्यू
ग्रिड-व्यू क्या है?
कई वेब पेज ग्रिड-व्यू पर आधारित होते हैं, जिसका अर्थ है कि पेज कॉलम में विभाजित है:
वेब पेज डिजाइन करते समय ग्रिड-व्यू का उपयोग करना बहुत मददगार होता है। यह पृष्ठ पर तत्वों को रखना आसान बनाता है।
एक प्रतिक्रियाशील ग्रिड-व्यू में अक्सर 12 कॉलम होते हैं, और इसकी कुल चौड़ाई 100% होती है, और जैसे-जैसे आप ब्राउज़र विंडो का आकार बदलते हैं, यह सिकुड़ता और विस्तारित होता जाएगा।
रिस्पॉन्सिव ग्रिड-व्यू का निर्माण
आइए एक प्रतिक्रियाशील ग्रिड-व्यू बनाना शुरू करें।
पहले सुनिश्चित करें कि सभी HTML तत्वों में box-sizingसंपत्ति सेट है
border-box। यह सुनिश्चित करता है कि तत्वों की कुल चौड़ाई और ऊंचाई में पैडिंग और बॉर्डर शामिल हैं।
अपने सीएसएस में निम्नलिखित कोड जोड़ें:
* {
box-sizing: border-box;
}
हमारे सीएसएस बॉक्स साइजिंग अध्याय box-sizingमें संपत्ति के बारे में और पढ़ें ।
निम्न उदाहरण दो स्तंभों के साथ एक साधारण प्रतिक्रियाशील वेब पृष्ठ दिखाता है:
उदाहरण
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
उपरोक्त उदाहरण ठीक है यदि वेब पेज में केवल दो कॉलम हैं।
हालांकि, हम वेब पेज पर अधिक नियंत्रण रखने के लिए, 12 कॉलम के साथ एक प्रतिक्रियाशील ग्रिड-व्यू का उपयोग करना चाहते हैं।
पहले हमें एक कॉलम के लिए प्रतिशत की गणना करनी चाहिए: 100% / 12 कॉलम = 8.33%।
फिर हम 12 स्तंभों में से प्रत्येक के लिए एक वर्ग बनाते हैं, class="col-"और एक संख्या परिभाषित करते हैं कि अनुभाग कितने स्तंभों को फैलाना चाहिए:
सीएसएस:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
ये सभी कॉलम बाईं ओर तैरते हुए होने चाहिए, और इनमें 15px की पैडिंग होनी चाहिए:
सीएसएस:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
प्रत्येक पंक्ति को एक में लपेटा जाना चाहिए <div>। एक पंक्ति के अंदर स्तंभों की संख्या हमेशा 12 तक जोड़नी चाहिए:
एचटीएमएल:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
एक पंक्ति के अंदर के सभी स्तंभ बाईं ओर तैर रहे हैं, और इसलिए उन्हें पृष्ठ के प्रवाह से बाहर कर दिया गया है, और अन्य तत्वों को इस तरह रखा जाएगा जैसे कि स्तंभ मौजूद नहीं हैं। इसे रोकने के लिए, हम एक शैली जोड़ेंगे जो प्रवाह को साफ करती है:
सीएसएस:
.row::after {
content: "";
clear: both;
display: table;
}
हम इसे बेहतर दिखाने के लिए कुछ शैलियों और रंगों को भी जोड़ना चाहते हैं:
उदाहरण
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
ध्यान दें कि जब आप ब्राउज़र विंडो को बहुत छोटी चौड़ाई में आकार देते हैं तो उदाहरण में वेबपेज अच्छा नहीं दिखता है। अगले अध्याय में आप सीखेंगे कि इसे कैसे ठीक किया जाए।