रिस्पॉन्सिव वेब डिज़ाइन वेब साइटों को विकसित करने का एक तरीका है ताकि वे विभिन्न प्रकार के उपकरणों और स्क्रीन आकारों पर अच्छी तरह से काम करें। विभिन्न उपकरणों के लिए साइट के कई संस्करण बनाने के बजाय, सभी प्लेटफार्मों पर उपयोगकर्ता के अनुभव को बेहतर बनाने के लिए रिस्पॉन्सिव डिज़ाइन लचीले ग्रिड और लेआउट, मीडिया क्वेरी और तरल छवियों का उपयोग करता है।
जैसा कि दुनिया भर में अधिक से अधिक लोग इंटरनेट ब्राउज़ करने के लिए सेल फोन और टैबलेट का उपयोग कर रहे हैं, एक उत्तरदायी वेबसाइट का होना अब कोई विकल्प नहीं है - यह एक आवश्यकता है। एक प्रतिक्रियाशील डिज़ाइन उपभोक्ताओं को निर्बाध रूप से सामग्री तक पहुंचने की अनुमति देकर अधिक प्रयोज्यता प्रदान करता है, चाहे वे किसी भी उपकरण का उपयोग कर रहे हों। यह यह सुनिश्चित करके उपयोगकर्ता अनुभव को भी बेहतर बनाता है कि सामग्री दृश्य रूप से सुसंगत है और सभी डिवाइसों पर आसानी से पढ़ने योग्य है। इससे निराशा कम हो सकती है और बातचीत को बढ़ावा मिल सकता है। इसके अलावा, रिस्पॉन्सिव डिज़ाइन वाली भविष्य-प्रूफ़ वेबसाइटें, उन्हें व्यापक रीडिज़ाइन किए बिना नए उपकरणों के लिए अनुकूलित करने देती हैं।
आज, हम रिस्पॉन्सिव वेब डिज़ाइन की मूल बातें देखेंगे और विशेष रूप से दो शक्तिशाली सीएसएस तकनीकों पर ध्यान केंद्रित करेंगे: फ्लेक्सबॉक्स और सीएसएस ग्रिड। हम दिखाएंगे कि कैसे ये लेआउट रंगीन बक्से और संख्याओं के साथ एक साधारण वेबसाइट का उपयोग करके विभिन्न स्क्रीन आकारों के अनुकूल होते हैं।
इंटरनेट के शुरुआती दिनों से लेकर अब तक रिस्पॉन्सिव वेब डिज़ाइन में बहुत बदलाव आया है। मीडिया क्वेरीज़, जो डिवाइस की विशेषताओं, जैसे स्क्रीन आकार, रिज़ॉल्यूशन और ओरिएंटेशन के आधार पर शैलियाँ लागू करती हैं। 2000 के दशक की शुरुआत में पेश किए गए थे, फ्लेक्सबॉक्स को 2012 में लॉन्च किया गया था, और सीएसएस ग्रिड को 2017 में अपनाया गया था। इन नवाचारों ने डिजाइनरों को कई अलग-अलग उपकरणों पर अनुकूलनीय लेआउट बनाने की अनुमति दी है, जो उपयोगकर्ताओं के लिए बेहतर अनुभव प्रदान करते हैं।
अब, आइए कुछ व्यावहारिक उदाहरण देखें जिससे हम देखेंगे कि फ्लेक्सबॉक्स और सीएसएस ग्रिड कैसे काम करते हैं।
हम सीएसएस ग्रिड का उपयोग करके एक सरल लेआउट बनाएंगे।
ग्रिड लेआउट के लिए HTML:
Color Grid 123456
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; }
सीएसएस:
यह ग्रिड लेआउट उपयोग करता है:
इसके बाद, आइए रंगीन बक्सों की एक सरल पंक्ति बनाने के लिए फ्लेक्सबॉक्स का उपयोग करें।
फ्लेक्सबॉक्स लेआउट के लिए HTML:
Color Row 1234
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; एकरूपता प्रदान करते हैं, जबकि इन गुणों का संयोजन विभिन्न उपकरणों की आवश्यकताओं के अनुरूप लेआउट को एक सुखद रूप देता है।
यह फ्लेक्सबॉक्स लेआउट कई प्रतिक्रियाशील डिज़ाइन विशेषताओं को प्रदर्शित करता है।
जब सीएसएस में लेआउट डिजाइन की बात आती है, तो ग्रिड और फ्लेक्सबॉक्स दोनों ही बेहतरीन विकल्प हैं, लेकिन वे अलग-अलग उद्देश्यों को पूरा करते हैं। सीएसएस ग्रिड एक द्वि-आयामी लेआउट प्रणाली है जो आपको पंक्तियों और स्तंभों के साथ जटिल ग्रिड संरचनाएं बनाने की अनुमति देती है, जो इसे उन लेआउट के लिए आदर्श बनाती है जहां दोनों आयामों पर सटीक नियंत्रण की आवश्यकता होती है, जैसे कि वेब एप्लिकेशन या डैशबोर्ड में। दूसरी ओर, फ्लेक्सबॉक्स एक एक-आयामी लेआउट मॉडल है जो एक ही अक्ष के साथ क्षैतिज या लंबवत रूप से स्थान वितरित करने में सबसे अच्छा है - जो इसे सरल लेआउट या बटन या नेविगेशन मेनू जैसे छोटे घटकों के लिए एकदम सही बनाता है। जबकि आप एक व्यापक, संरचित लेआउट के लिए ग्रिड चुन सकते हैं जहां तत्वों को दोनों अक्षों पर संरेखित करने की आवश्यकता होती है, फ्लेक्सबॉक्स एक अनुकूली, तरल लेआउट के लिए आपका पसंदीदा होगा जिसे सामग्री आकार पर प्रतिक्रिया करने की आवश्यकता होती है। अंत में, आपकी पसंद आपके प्रोजेक्ट की विशिष्ट आवश्यकताओं पर निर्भर होनी चाहिए; अक्सर, दोनों को एक साथ, पूरक रूप से उपयोग करने से आपको सर्वोत्तम परिणाम मिल सकते हैं।
सीएसएस ग्रिड और फ्लेक्सबॉक्स के साथ, आप अनुकूलनीय लेआउट बना सकते हैं जो किसी भी डिवाइस पर बहुत अच्छे लगते हैं। ये उदाहरण बताते हैं कि गतिशील डिज़ाइन लागू करना कितना सरल हो सकता है।
अब आपकी बारी है! इन तकनीकों के साथ प्रयोग करें, रंग और लेआउट सेटिंग्स को संशोधित करें, और देखें कि मज़ेदार और प्रतिक्रियाशील डिज़ाइन बनाना कितना आसान है।
``
स्रोत:
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=एक प्रमुख लेआउट शैली के लिए, पंक्तियों के साथ काम करते समय सहायक।
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3