Jassif Team Institution

HTML Responsive Web Design

रिस्पॉन्सिव वेब डिज़ाइन का मतलब ऐसे वेब पेज बनाना है जो सभी डिवाइस पर बहुत अच्छे लगते हैं!

एक प्रतिक्रियाशील वेब डिज़ाइन स्वचालित रूप से विभिन्न स्क्रीन आकारों और व्यूपोर्ट में समायोजित हो जाता है[उद्धरण:1]।

एक प्रतिक्रियाशील वेब डिज़ाइन स्वचालित रूप से विभिन्न स्क्रीन आकारों और व्यूपोर्ट में समायोजित हो जाता है

Responsive Web Design

Responsive Web Design क्या हैं?

रिस्पॉन्सिव वेब डिज़ाइन किसी वेबसाइट को स्वचालित रूप से आकार देने, छिपाने, संक्षिप्त करने या विस्तारित करने के लिए HTML और CSS का उपयोग करने की प्रक्रिया है ताकि यह सभी उपकरणों (डेस्कटॉप, टैबलेट और फोन) पर अच्छा दिखे:

व्यूपोर्ट सेट करना

एक प्रतिक्रियाशील वेबसाइट बनाने के लिए, अपने सभी वेब पेजों पर निम्नलिखित <मेटा> टैग जोड़ें:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

यह आपके पृष्ठ का व्यूपोर्ट सेट करता है, जो ब्राउज़र को पृष्ठ के आयाम और स्केलिंग को नियंत्रित करने के तरीके देता है[उद्धरण:2]।

यहां व्यूपोर्ट मेटा टैग के बिना एक वेब पेज और व्यूपोर्ट मेटा टैग के साथ एक ही वेब पेज का एक उदाहरण दिया गया है:

व्यूपोर्ट मेटा टैग के बिना एक वेब पेज का एक उदाहरण और व्यूपोर्ट मेटा टैग के साथ एक ही वेब पेज

प्रतिक्रियाशील छवियां

रिस्पॉन्सिव छवियां वे छवियां होती हैं जो किसी भी ब्राउज़र आकार में फिट होने के लिए स्केल की जा सकती हैं।

चौड़ाई विशेषता का उपयोग करना

यदि सीएसएस चौड़ाई संपत्ति 100% पर सेट है, तो छवि उत्तरदायी होगी और ऊपर और नीचे स्केल होगी:

यदि सीएसएस चौड़ाई संपत्ति 100% पर सेट है, तो छवि उत्तरदायी होगी और ऊपर और नीचे स्केल होगी

<img src="img_girl.jpg" style="width:100%;">

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

अधिकतम-चौड़ाई विशेषता का उपयोग करना

यदि अधिकतम-चौड़ाई गुण 100% पर सेट है, तो आवश्यकता पड़ने पर छवि को छोटा कर दिया जाएगा, लेकिन उसके मूल आकार से बड़ा नहीं किया जाएगा:

यदि अधिकतम-चौड़ाई गुण 100% पर सेट है, तो आवश्यकता पड़ने पर छवि को छोटा कर दिया जाएगा, लेकिन उसके मूल आकार से बड़ा नहीं किया जाएगा

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

ब्राउज़र की चौड़ाई के आधार पर अलग-अलग छवियाँ दिखाई जा रही हैं

HTML <चित्र> तत्व आपको विभिन्न ब्राउज़र विंडो आकारों के लिए अलग-अलग छवियों को परिभाषित करने की अनुमति देता है।

चौड़ाई के आधार पर नीचे दी गई छवि कैसे बदलती है यह देखने के लिए ब्राउज़र विंडो का आकार बदलें:

यह देखने के लिए ब्राउज़र विंडो का आकार बदलें कि चौड़ाई के आधार पर नीचे दी गई छवि कैसे बदलती है

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

प्रतिक्रियाशील पाठ का आकार

पाठ का आकार इकाई "vw" के साथ सेट किया जा सकता है, जिसका अर्थ है "व्यूपोर्ट चौड़ाई"[उद्धरण:1][उद्धरण:4]।

इस प्रकार टेक्स्ट का आकार ब्राउज़र विंडो के आकार पर निर्भर करता है:

<h1 style="font-size:10vw">Hello World</h1>

व्यूपोर्ट ब्राउज़र विंडो का आकार है। 1vw = व्यूपोर्ट चौड़ाई का 1%। यदि व्यूपोर्ट 50 सेमी चौड़ा है, तो 1vw 0.5 सेमी है [उद्धरण:1]।

Media Queries

पाठ और छवियों का आकार बदलने के अलावा, प्रतिक्रियाशील वेब पृष्ठों पर मीडिया प्रश्नों का उपयोग करना आम बात है।

मीडिया क्वेरीज़ विभिन्न ब्राउज़र आकारों के लिए पूरी तरह से अलग शैलियों को परिभाषित कर सकती हैं।

उदाहरण: यह देखने के लिए ब्राउज़र विंडो का आकार बदलें कि नीचे दिए गए तीन div तत्व बड़ी स्क्रीन पर क्षैतिज रूप से प्रदर्शित होते हैं और छोटी स्क्रीन पर लंबवत रूप से प्रदर्शित होते हैं:

<शैली> .बाएँ, .दाएँ { फ्लोट: बाएँ; चौड़ाई: 20%; /* चौड़ाई डिफ़ॉल्ट रूप से 20% है */ } .मुख्य { फ्लोट: बाएँ; चौड़ाई: 60%; /* चौड़ाई डिफ़ॉल्ट रूप से 60% है */ } /* 800px पर ब्रेकप्वाइंट जोड़ने के लिए मीडिया क्वेरी का उपयोग करें: */ @मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 800px) { .बाएँ, .मुख्य, .दाएँ { चौड़ाई: 100%; /* चौड़ाई 100% जब व्यूपोर्ट 800px या छोटा हो */ } } </शैली>

उत्तरदायी वेब पेज - पूर्ण उदाहरण

एक रिस्पॉन्सिव वेब पेज बड़े डेस्कटॉप स्क्रीन और छोटे मोबाइल फोन पर अच्छा दिखना चाहिए।

Responsive Web Design - Frameworks

सभी लोकप्रिय सीएसएस फ्रेमवर्क प्रतिक्रियाशील डिज़ाइन प्रदान करते हैं।

वे निःशुल्क और उपयोग में आसान हैं।

W3.CSS

W3.CSS CSS framework , , .

W3.CSS CSS frameworks- .

W3.CSS jQuery JavaScript .

<!DOCTYPE html> <एचटीएमएल> <सिर> <शीर्षक>W3.CSS</शीर्षक> <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1"> <लिंक rel='स्टाइलशीट' href='https://www.jassifteam.com/w3css/4/w3.css'> </head> <शरीर> <div class='w3-कंटेनर w3-ग्रीन'> <h1>जसिफ टीम डेमो</h1> <p>इस प्रतिक्रियाशील पृष्ठ का आकार बदलें!</p> </div> <div class='w3-row-padding'> <div class='w3-third'> <h2>लंदन</h2> <p>लंदन इंग्लैंड की राजधानी है।</p> <p>यह यूनाइटेड किंगडम का सबसे अधिक आबादी वाला शहर है, 13 मिलियन से अधिक लोगों के महानगरीय क्षेत्र के साथ।</p> </div> <div class='w3-third'> <h2>पेरिस</h2> <p>पेरिस फ्रांस की राजधानी है।</p> <p>पेरिस क्षेत्र यूरोप के सबसे बड़े जनसंख्या केंद्रों में से एक है। 12 मिलियन से अधिक की आबादी के साथ।</p> </div> <div class='w3-third'> <h2>टोक्यो</h2> <p>टोक्यो जापान की राजधानी है।</p> <p>यह वृहत टोक्यो क्षेत्र का केंद्र है, यह दुनिया का सबसे घनी आबादी वाला महानगरीय क्षेत्र भी है।</p> </div> </div> </body> </html>

W3.CSS , W3.CSS .

बूटस्ट्रैप

एक अन्य लोकप्रिय सीएसएस ढांचा बूटस्ट्रैप है:

<!DOCTYPE html> <html lang='en'> <सिर> <शीर्षक>बूटस्ट्रैप 5 उदाहरण</शीर्षक> <मेटा चारसेट='यूटीएफ-8'> <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1"> <लिंक href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='स्टाइलशीट'> <स्क्रिप्ट src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js'></script> </head> <शरीर> <div class='कंटेनर-द्रव पी-5 बीजी-प्राथमिक टेक्स्ट-व्हाइट टेक्स्ट-सेंटर'> <h1>मेरा पहला बूटस्ट्रैप पृष्ठ</h1> <p>इस प्रतिक्रियाशील पृष्ठ का आकार बदलें और प्रभाव देखें!</p> </div> <div class='कंटेनर mt-5'> <div वर्ग='पंक्ति'> <div class='col-sm-4'> <h3>कॉलम 1</h3> <p>लोरेम इप्सम...</p> </div> <div class='col-sm-4'> <h3>कॉलम 2</h3> <p>लोरेम इप्सम...</p> </div> <div class='col-sm-4'> <h3>कॉलम 3</h3> <p>लोरेम इप्सम...</p> </div> </div> </div>

बूटस्ट्रैप के बारे में अधिक जानने के लिए, हमारे बूटस्ट्रैप ट्यूटोरियल पर जाएँ।

अभ्यास