"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > सीएसएस ग्रिड और फ्लेक्सबॉक्स के साथ उत्तरदायी वेब डिज़ाइन

सीएसएस ग्रिड और फ्लेक्सबॉक्स के साथ उत्तरदायी वेब डिज़ाइन

2024-08-07 को प्रकाशित
ब्राउज़ करें:825

Responsive Web Design with CSS Grid and Flexbox

सीएसएस ग्रिड और फ्लेक्सबॉक्स का उपयोग करके उत्तरदायी वेब डिज़ाइन

रिस्पॉन्सिव वेब डिज़ाइन वेब साइटों को विकसित करने का एक तरीका है ताकि वे विभिन्न प्रकार के उपकरणों और स्क्रीन आकारों पर अच्छी तरह से काम करें। विभिन्न उपकरणों के लिए साइट के कई संस्करण बनाने के बजाय, सभी प्लेटफार्मों पर उपयोगकर्ता के अनुभव को बेहतर बनाने के लिए रिस्पॉन्सिव डिज़ाइन लचीले ग्रिड और लेआउट, मीडिया क्वेरी और तरल छवियों का उपयोग करता है।

रिस्पॉन्सिव वेब डिज़ाइन क्यों महत्वपूर्ण है?

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

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

उत्तरदायी वेब डिज़ाइन का संक्षिप्त इतिहास

इंटरनेट के शुरुआती दिनों से लेकर अब तक रिस्पॉन्सिव वेब डिज़ाइन में बहुत बदलाव आया है। मीडिया क्वेरीज़, जो डिवाइस की विशेषताओं, जैसे स्क्रीन आकार, रिज़ॉल्यूशन और ओरिएंटेशन के आधार पर शैलियाँ लागू करती हैं। 2000 के दशक की शुरुआत में पेश किए गए थे, फ्लेक्सबॉक्स को 2012 में लॉन्च किया गया था, और सीएसएस ग्रिड को 2017 में अपनाया गया था। इन नवाचारों ने डिजाइनरों को कई अलग-अलग उपकरणों पर अनुकूलनीय लेआउट बनाने की अनुमति दी है, जो उपयोगकर्ताओं के लिए बेहतर अनुभव प्रदान करते हैं।

सीएसएस ग्रिड और फ्लेक्सबॉक्स के साथ रिस्पॉन्सिव लेआउट बनाना

अब, आइए कुछ व्यावहारिक उदाहरण देखें जिससे हम देखेंगे कि फ्लेक्सबॉक्स और सीएसएस ग्रिड कैसे काम करते हैं।

उत्तरदायी ग्रिड लेआउट: रंग ग्रिड

हम सीएसएस ग्रिड का उपयोग करके एक सरल लेआउट बनाएंगे।

ग्रिड लेआउट के लिए HTML:



    Color Grid
1
2
3
4
5
6

HTML:

  • HTML मार्कअप विभिन्न संख्याओं और पृष्ठभूमि रंगों के साथ एक प्रतिक्रियाशील कंटेनर (ग्रिड-कंटेनर) और रंगीन बक्से (ग्रिड-आइटम) बनाता है। व्यूपोर्ट मेटा टैग लेआउट को विभिन्न उपकरणों पर स्केल करने की अनुमति देता है।

ग्रिड लेआउट के लिए सीएसएस:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

सीएसएस:

  • ग्रिड लेआउट के लिए सीएसएस अधिक प्रतिक्रियाशील होने के लिए विभिन्न ग्रिड गुणों का उपयोग करता है। प्रदर्शन: ग्रिड; घोषणा वर्ग ग्रिड-कंटेनर के साथ तत्व को ग्रिड कंटेनर के रूप में सेट करती है, ताकि हम ग्रिड द्वारा प्रदान की जाने वाली सभी चीज़ों का लाभ उठा सकें। ग्रिड-टेम्पलेट-कॉलम: दोहराएँ(ऑटो-फ़िट, मिनमैक्स(100px, 1fr)); संपत्ति परिभाषित करती है कि ग्रिड में कॉलम कैसे संरचित हैं: यह स्वचालित रूप से उपलब्ध स्थान के आधार पर कॉलम की संख्या को समायोजित करता है, प्रत्येक कॉलम की न्यूनतम चौड़ाई 100 पिक्सेल और अधिकतम उपलब्ध स्थान का 1 अंश (1fr) होता है। यह डिज़ाइन ग्रिड को विभिन्न स्क्रीन आकारों के अनुकूल बनाने की अनुमति देता है, ताकि ग्रिड आइटम ओवरफ्लो न हों या भद्दे अंतराल न बनाएं। अंतर: 10px; संपत्ति ग्रिड आइटमों पर लगातार रिक्ति लागू करती है। अंत में, हम ग्रिड-आइटम तत्वों को डिस्प्ले के साथ स्टैक करते हैं: फ्लेक्स; और उनकी सामग्री को justify-content: केंद्र के साथ केन्द्रित करें; और संरेखित-आइटम: केंद्र। इस तरह, प्रत्येक आइटम सुव्यवस्थित और संतुलित है।

उत्तरदायी वेब डिज़ाइन का उदाहरण: ग्रिड लेआउट

यह ग्रिड लेआउट उपयोग करता है:

  1. डायनामिक कॉलम गणना: ग्रिड स्वचालित रूप से व्यूपोर्ट की चौड़ाई में फिट होने के लिए कॉलम की संख्या को समायोजित करता है, जिसमें आइटम न्यूनतम 100px लेते हैं।
  2. लचीला आकार: ऑटो-फिट बक्से को जरूरत पड़ने पर फिर से प्रवाहित और पुनर्व्यवस्थित करने देता है, जिससे हर चीज को अधिक व्यवस्थित रूप मिलता है।
  3. मीडिया क्वेरीज़: हालांकि वास्तव में यहां नहीं लिखा गया है, जिस तरह से ग्रिड तत्व विभिन्न स्क्रीन आकारों के साथ व्यवहार करते हैं, वह प्रतिक्रियाशील ग्रिड गुणों का उपयोग करके मीडिया क्वेरीज़ की अवधारणा को प्रदर्शित करता है।

रिस्पॉन्सिव फ्लेक्सबॉक्स लेआउट: रंग पंक्ति

इसके बाद, आइए रंगीन बक्सों की एक सरल पंक्ति बनाने के लिए फ्लेक्सबॉक्स का उपयोग करें।

फ्लेक्सबॉक्स लेआउट के लिए HTML:



    Color Row
1
2
3
4

HTML:

  • ग्रिड उदाहरण के समान, यहां HTML फ्लेक्स-आइटम बॉक्स के साथ एक फ्लेक्स-कंटेनर बनाता है जो रंगीन संख्याएं प्रदर्शित करता है।

फ्लेक्सबॉक्स लेआउट के लिए सीएसएस:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

सीएसएस:
यहां सीएसएस एक प्रतिक्रियाशील लेआउट बनाने के लिए फ्लेक्सबॉक्स गुणों का उपयोग करता है जो विभिन्न स्क्रीन आकारों के अनुकूल होता है। प्रदर्शन: फ्लेक्स; .फ्लेक्स-कंटेनर अपने चाइल्ड एलिमेंट्स, या (फ्लेक्स आइटम्स), फ्लेक्सबॉक्स कार्यात्मकताएं देता है। फ्लेक्स-रैप: रैप; यदि कंटेनर की चौड़ाई पार हो गई है तो संपत्ति आइटम को कई लाइनों पर प्रवाहित करने की अनुमति देती है। औचित्य-सामग्री: केंद्र; प्रॉपर्टी फ्लेक्स आइटम को मुख्य अक्ष के साथ केंद्रित करती है, इसलिए आइटम की संख्या की परवाह किए बिना एक संतुलित लेआउट होता है। अंतर: 10px; संपत्ति वस्तुओं के बीच समान दूरी लाती है, जिससे समग्र संगठन में सुधार होता है। प्रत्येक .फ्लेक्स-आइटम भी एक फ्लेक्स कंटेनर है, जो डिस्प्ले का उपयोग करता है: फ्लेक्स; इसकी आंतरिक सामग्री के आगे संरेखण की अनुमति देने के लिए, जो justify-content: केंद्र का उपयोग करके लंबवत और क्षैतिज रूप से केंद्रित है; और संरेखित-आइटम: केंद्र;। ऊँचाई के निश्चित आयाम: 100px; और चौड़ाई: 100px; एकरूपता प्रदान करते हैं, जबकि इन गुणों का संयोजन विभिन्न उपकरणों की आवश्यकताओं के अनुरूप लेआउट को एक सुखद रूप देता है।

उत्तरदायी वेब डिज़ाइन का उदाहरण: फ्लेक्सबॉक्स लेआउट

यह फ्लेक्सबॉक्स लेआउट कई प्रतिक्रियाशील डिज़ाइन विशेषताओं को प्रदर्शित करता है।

  1. फ्लेक्स रैपिंग: फ्लेक्स-रैप: रैप; जब वे पंक्ति में फिट नहीं हो पाते, तो प्रॉपर्टी उन्हें अलग-अलग व्यूपोर्ट चौड़ाई के अनुरूप ढालकर अगली पंक्ति में ले जाती है।
  2. केंद्रित आइटम: स्क्रीन आकार की परवाह किए बिना आइटम केंद्रित रहते हैं, जिससे समग्र प्रस्तुति में सुधार होता है।
  3. निश्चित आयाम: बक्से का एक विशिष्ट आकार होता है, लेकिन वे उपलब्ध स्थान के आधार पर लपेटते हैं और पुन: समायोजित करते हैं, जिससे एक प्रतिक्रियाशील लेआउट की अनुमति मिलती है।

सीएसएस ग्रिड और फ्लेक्सबॉक्स की तुलना करना

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

निष्कर्ष

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

अब आपकी बारी है! इन तकनीकों के साथ प्रयोग करें, रंग और लेआउट सेटिंग्स को संशोधित करें, और देखें कि मज़ेदार और प्रतिक्रियाशील डिज़ाइन बनाना कितना आसान है।
``
स्रोत:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://kinsta.com/blog/responsive-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=एक प्रमुख लेआउट शैली के लिए, पंक्तियों के साथ काम करते समय सहायक।

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/wendyver/responsive-web-design-with-css-grid-and-flexbox-2gio?1 यदि कोई उल्लंघन है, तो कृपया हटाने के लिए स्टडी_गोलंग@163.com पर संपर्क करें। यह
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3