अनुकूली वक्ता

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

विधि का सार nth-of-type pseudo -class का उपयोग करना है : स्तंभों की संख्या और चौड़ाई विभिन्न आकारों ( डेमो ) की स्क्रीन पर बदलती है।

पहले और अंतिम तत्वों के लिए कक्षाओं का उपयोग करने का नुकसान

सही ढंग से प्रदर्शित करने के लिए प्रत्येक पंक्ति में स्तंभों के लिए .first और .last वर्गों का उपयोग करना बहुत थकाऊ है, और अनुकूली लेआउट समस्याएं हैं:

Nth-of-type का उपयोग करना

उदाहरण के लिए nth-of-type (An + B) बहुत आसानी से स्पष्ट फ़्लोट और पैडिंग करने में मदद करता है:

• .grid4 .col: nth-of-type (4n + 1) - हर चौथा .col तत्व एक नई लाइन पर शुरू होता है
• .grid2 .col: nth-of-type (2n + 1) - प्रत्येक सेकंड .col तत्व एक नई लाइन पर शुरू होता है

.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; } 

अनुकूलन क्षमता जोड़ना

पृष्ठ को उत्तरदायी बनने के लिए, हम मीडिया प्रश्नों का उपयोग करते हैं, सभी मान प्रतिशत के रूप में:

 /* col */ .col { background: #eee; float: left; margin-left: 3.2%; margin-bottom: 30px; } /* grid4 col */ .grid4 .col { width: 22.6%; } /* grid3 col */ .grid3 .col { width: 31.2%; } /* grid2 col */ .grid2 .col { width: 48.4%; } 

यहां बताया गया है कि विंडो को रीसाइज़ करते समय (740px से कम) चार-कॉलम से तीन-कॉलम ग्रिड में संक्रमण कैसे होता है:

• अगर चौड़ाई 31.2% से कम हो जाती है।। ग्रिड 4 .col बदल जाती है (पूरी विंडो चौड़ाई का एक तिहाई)
• लेफ्ट इंडेंट रिसेट्स
• तीन-स्तंभ ग्रिड बनाने के लिए nth-of-type (3n + 1) के साथ बाएं पैडिंग को ओवरराइड करता है

 @media screen and (max-width: 740px) { .grid4 .col { width: 31.2%; } .grid4 .col:nth-of-type(4n+1) { margin-left: 3.2%; clear: none; } .grid4 .col:nth-of-type(3n+1) { margin-left: 0; clear: left; } } 

चार-स्तंभ और तीन-स्तंभ से दो-स्तंभ ग्रिड में संक्रमण तब होता है जब खिड़की की चौड़ाई 600px से कम होती है:

 @media screen and (max-width: 600px) { /* change grid4 to 2-column */ .grid4 .col { width: 48.4%; } .grid4 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; } .grid4 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; } /* change grid3 to 2-column */ .grid3 .col { width: 48.4%; } .grid3 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; } .grid3 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; } } 

संपूर्ण चौड़ाई को फैलाने के लिए, निम्न कोड का उपयोग करें:

 @media screen and (max-width: 400px) { .col { width: 100% !important; margin-left: 0 !important; clear: none !important; } } 

Internet Explorer में कार्य करें

Internet Explorer संस्करण 8 और पहले मीडिया क्वेरीज़ और nth-of-type का समर्थन नहीं करता है। इस समस्या को हल करने के लिए, आप selectivizr.js (फिक्स nth-of-type) और response.js (मीडिया क्वेरी को ठीक करें) का उपयोग कर सकते हैं। दुर्भाग्य से selectivizr.js और response.js बहुत अच्छे से एक साथ काम नहीं करते हैं: nth-of-type मीडिया के प्रश्नों के साथ काम नहीं करेगा।