इस पेज का अनुवाद Cloud Translation API से किया गया है.

रिस्पॉन्सिव डिज़ाइन

यह कोडलैब, प्रोग्रेसिव वेब ऐप्लिकेशन डेवलप करने से जुड़े ट्रेनिंग कोर्स का हिस्सा है. इसे Google Developers Training टीम ने बनाया है. अगर कोडलैब को क्रम से पूरा किया जाता है, तो आपको इस कोर्स से सबसे ज़्यादा फ़ायदा मिलेगा.

कोर्स के बारे में पूरी जानकारी के लिए, प्रोग्रेसिव वेब ऐप्लिकेशन डेवलप करने के बारे में खास जानकारी देखें.

परिचय

इस लैब में, वेबसाइट के कॉन्टेंट को रिस्पॉन्सिव बनाने के लिए स्टाइल करने का तरीका बताया गया है.

आपको क्या सीखने को मिलेगा

अपने ऐप्लिकेशन को इस तरह से स्टाइल करें कि वह कई डिवाइसों पर अच्छी तरह से काम करे
अपने कॉन्टेंट को कॉलम में आसानी से व्यवस्थित करने के लिए, Flexbox का इस्तेमाल कैसे करें
स्क्रीन के साइज़ के हिसाब से कॉन्टेंट को फिर से व्यवस्थित करने के लिए, मीडिया क्वेरी का इस्तेमाल कैसे करें

आपको क्या पता होना चाहिए

बेसिक एचटीएमएल और सीएसएस

आपको इन चीज़ों की ज़रूरत होगी

टर्मिनल/शेल ऐक्सेस वाला कंप्यूटर
इंटरनेट कनेक्शन
टेक्स्ट एडिटर

github से pwa-training-labs रिपॉज़िटरी को डाउनलोड या क्लोन करें. साथ ही, अगर ज़रूरी हो, तो Node.js का एलटीएस वर्शन इंस्टॉल करें.

अगर आपके पास पसंदीदा लोकल डेवलपमेंट सर्वर नहीं है, तो Node.js http-server पैकेज इंस्टॉल करें:

npm install http-server -g

responsive-design-lab/app/ डायरेक्ट्री में जाएं और सर्वर शुरू करें:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Ctrl-c की मदद से, सर्वर को किसी भी समय बंद किया जा सकता है.

अपना ब्राउज़र खोलें और localhost:8080/ पर जाएं.

ध्यान दें: सभी सर्विस वर्कर का रजिस्ट्रेशन रद्द करें और लोकल होस्ट के लिए सभी सर्विस वर्कर कैश मिटाएं, ताकि वे लैब में कोई रुकावट न डालें. Chrome DevTools में, ऐप्लिकेशन टैब के स्टोरेज मिटाएं सेक्शन में जाकर, साइट का डेटा मिटाएं पर क्लिक करके ऐसा किया जा सकता है.

अगर आपके पास ऐसा टेक्स्ट एडिटर है जिससे कोई प्रोजेक्ट खोला जा सकता है, तो responsive-design-lab/app/ फ़ोल्डर खोलें. इससे, आपको व्यवस्थित रहने में आसानी होगी. इसके अलावा, अपने कंप्यूटर के फ़ाइल सिस्टम में फ़ोल्डर खोलें. आपको app/ फ़ोल्डर में लैब बनानी होगी.

इस फ़ोल्डर में ये चीज़ें शामिल हैं:

index.html हमारी सैंपल साइट/ऐप्लिकेशन का मुख्य एचटीएमएल पेज है
modernizr-custom.js एक ऐसी सुविधा है जो Flexbox की सुविधा के लिए टेस्टिंग को आसान बनाती है
styles/main.css, सैंपल साइट के लिए कैस्केडिंग स्टाइल शीट है

ब्राउज़र में ऐप्लिकेशन पर वापस जाएं. विंडो की चौड़ाई को 500 पिक्सल से कम करके देखें. आपको दिखेगा कि कॉन्टेंट सही तरीके से नहीं दिख रहा है.

डेवलपर टूल खोलें और अपने ब्राउज़र में डिवाइस मोड चालू करें. यह मोड, मोबाइल डिवाइस पर आपके ऐप्लिकेशन के व्यवहार को सिम्युलेट करता है. ध्यान दें कि स्क्रीन पर तय चौड़ाई वाले कॉन्टेंट को फ़िट करने के लिए, पेज को ज़ूम आउट किया गया है. इससे उपयोगकर्ताओं को अच्छा अनुभव नहीं मिलता, क्योंकि ज़्यादातर उपयोगकर्ताओं के लिए कॉन्टेंट बहुत छोटा होगा. इसलिए, उन्हें ज़ूम और पैन करना पड़ेगा.

index.html में मौजूद TODO 3 की जगह यह टैग डालें:

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

फ़ाइल सेव करें. ब्राउज़र में पेज को रीफ़्रेश करें और डिवाइस मोड में पेज देखें. ध्यान दें कि पेज अब ज़ूम आउट नहीं किया गया है और कॉन्टेंट का स्केल, डेस्कटॉप डिवाइस पर मौजूद स्केल से मेल खाता है. अगर डिवाइस एम्युलेटर में कॉन्टेंट ठीक से काम नहीं कर रहा है, तो डिवाइस मोड को टॉगल करके रीसेट करें.

ध्यान दें: डिवाइस इम्यूलेशन से आपको यह पता चलता है कि आपकी साइट, मोबाइल डिवाइस पर कैसी दिखेगी. हालांकि, पूरी जानकारी पाने के लिए आपको हमेशा अपनी साइट को असली डिवाइसों पर टेस्ट करना चाहिए. Chrome और Firefox पर Android डिवाइसों को डीबग करने के बारे में ज़्यादा जानें.

जानकारी

मेटा व्यूपोर्ट टैग, ब्राउज़र को निर्देश देता है कि पेज के डाइमेंशन और पेज को छोटा-बड़ा करने की सुविधा को कैसे कंट्रोल किया जाए. width प्रॉपर्टी, व्यूपोर्ट के साइज़ को कंट्रोल करती है. इसे पिक्सल की किसी खास संख्या (उदाहरण के लिए, width=500) पर सेट किया जा सकता है. इसके अलावा, इसे खास वैल्यू device-width, पर भी सेट किया जा सकता है. यह 100% स्केल पर सीएसएस पिक्सल में स्क्रीन की चौड़ाई होती है. (इसके लिए, height और device-height वैल्यू भी उपलब्ध हैं. ये वैल्यू उन पेजों के लिए काम की हो सकती हैं जिनमें व्यूपोर्ट की ऊंचाई के आधार पर, एलिमेंट का साइज़ या पोज़िशन बदलती है.)

initial-scale प्रॉपर्टी, पेज के पहली बार लोड होने पर ज़ूम लेवल को कंट्रोल करती है. शुरुआती स्केल सेट करने से, कॉन्टेंट देखने का अनुभव बेहतर होता है. हालांकि, कॉन्टेंट अब भी स्क्रीन के किनारे से बाहर दिखता है. हम अगले चरण में इसे ठीक करेंगे.

अधिक जानकारी के लिए

व्यूपोर्ट सेट करना - रिस्पॉन्सिव वेब डिज़ाइन (स्क्रीन के हिसाब से साइज़ बदलने वाला वेब डिज़ाइन) के बारे में बुनियादी बातें
मोबाइल ब्राउज़र पर लेआउट को कंट्रोल करने के लिए व्यूपोर्ट मेटा टैग का इस्तेमाल करना - MDN

styles/main.css में मौजूद TODO 4 की जगह यह कोड डालें:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

फ़ाइल सेव करें. ब्राउज़र में डिवाइस मोड बंद करें और पेज को रीफ़्रेश करें. विंडो की चौड़ाई कम करके देखें. ध्यान दें कि तय की गई चौड़ाई पर, कॉन्टेंट सिंगल कॉलम लेआउट में बदल जाता है. डिवाइस मोड को फिर से चालू करें. देखें कि कॉन्टेंट, डिवाइस की चौड़ाई के हिसाब से दिखता है या नहीं.

जानकारी

टेक्स्ट को पढ़ने लायक बनाने के लिए, हम मीडिया क्वेरी का इस्तेमाल करते हैं. ऐसा तब किया जाता है, जब ब्राउज़र की चौड़ाई 48rem (ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट साइज़ पर 768 पिक्सल या उपयोगकर्ता के ब्राउज़र में डिफ़ॉल्ट फ़ॉन्ट साइज़ का 48 गुना) हो जाती है. Em और Rem का इस्तेमाल कब करना चाहिए लेख पढ़ें. इसमें बताया गया है कि रिलेटिव यूनिट के लिए rem का इस्तेमाल करना क्यों बेहतर है. मीडिया क्वेरी ट्रिगर होने पर, हम लेआउट को तीन कॉलम से बदलकर एक कॉलम कर देते हैं. इसके लिए, हम तीनों div के width को बदलकर, पेज को भर देते हैं.

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

सीएसएस में मौजूद नियमों को टिप्पणी के तौर पर मार्क करना

styles/main.css में मौजूद सभी नियमों को /* और */ में रैप करके, उन्हें टिप्पणी के तौर पर मार्क करें. हम इन्हें फ़ॉलबैक नियमों के तौर पर इस्तेमाल करेंगे. ऐसा तब किया जाएगा, जब फ़्लेक्सबॉक्स को प्रोग्रेसिव एन्हांसमेंट सेक्शन में फ़्लेक्सबॉक्स के तौर पर इस्तेमाल नहीं किया जा सकेगा.

Flexbox लेआउट जोड़ना

styles/main.css में मौजूद TODO 5.2 की जगह यह कोड डालें:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

कोड को सेव करें और अपने ब्राउज़र में index.html को रीफ़्रेश करें. ब्राउज़र में डिवाइस मोड बंद करें और पेज को रीफ़्रेश करें. अगर ब्राउज़र विंडो को छोटा किया जाता है, तो कॉलम छोटे होते जाते हैं. ऐसा तब तक होता है, जब तक सिर्फ़ एक कॉलम नहीं दिखता. हम अगले अभ्यास में मीडिया क्वेरी का इस्तेमाल करके, इस समस्या को ठीक करेंगे.

जानकारी

पहले नियम में, container div को फ़्लेक्स कंटेनर के तौर पर तय किया गया है. इससे, इसके सभी डायरेक्ट चाइल्ड के लिए फ़्लेक्स कॉन्टेक्स्ट चालू हो जाता है. हम Flexbox को शामिल करने के लिए, पुराने और नए सिंटैक्स का इस्तेमाल कर रहे हैं, ताकि ज़्यादा से ज़्यादा ब्राउज़र पर इसका इस्तेमाल किया जा सके. ज़्यादा जानकारी के लिए, ज़्यादा जानकारी देखें.

दूसरे नियम में, .col क्लास का इस्तेमाल करके, बराबर चौड़ाई वाले फ़्लेक्स चाइल्ड बनाए जाते हैं. क्लास col वाले सभी div के लिए, flex प्रॉपर्टी के पहले आर्ग्युमेंट को 1 पर सेट करने से, बाकी जगह को उनके बीच बराबर बांट दिया जाता है. यह चौड़ाई को खुद कैलकुलेट करने और सेट करने से ज़्यादा आसान है.

अधिक जानकारी के लिए

ज़रूरी नहीं: अलग-अलग रिलेटिव विड्थ सेट करना

nth-child pseudo-class का इस्तेमाल करके, पहले दो कॉलम की चौड़ाई को 1 और तीसरे कॉलम की चौड़ाई को 1.5 पर सेट करें. आपको हर कॉलम की चौड़ाई सेट करने के लिए, flex प्रॉपर्टी का इस्तेमाल करना होगा. उदाहरण के लिए, पहले कॉलम के लिए सिलेक्टर ऐसा दिखेगा:

.container .col:nth-child(1)

फ़्लेक्सबॉक्स के साथ मीडिया क्वेरी का इस्तेमाल करना

styles/main.css में मौजूद TODO 5.4 को यहां दिए गए कोड से बदलें:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

कोड को सेव करें और अपने ब्राउज़र में index.html को रीफ़्रेश करें. अब अगर ब्राउज़र की चौड़ाई कम की जाती है, तो कॉन्टेंट को एक कॉलम में फिर से व्यवस्थित किया जाता है.

जानकारी

मीडिया क्वेरी ट्रिगर होने पर, हम लेआउट को तीन कॉलम से बदलकर एक कॉलम में बदल देते हैं. इसके लिए, flex-flow प्रॉपर्टी को column पर सेट किया जाता है. इससे वही नतीजा मिलता है जो हमने पांचवें चरण में मीडिया क्वेरी जोड़कर हासिल किया था. Flexbox में कई अन्य प्रॉपर्टी भी होती हैं. जैसे, flex-flow. इनकी मदद से, कॉन्टेंट को आसानी से स्ट्रक्चर किया जा सकता है, उसका क्रम बदला जा सकता है, और उसे सही तरीके से अलाइन किया जा सकता है. इससे कॉन्टेंट, किसी भी संदर्भ में सही तरीके से दिखता है.

फ़्लेक्सबॉक्स एक नई टेक्नोलॉजी है. इसलिए, हमें अपनी सीएसएस में फ़ॉलबैक शामिल करने चाहिए.

Modernizr जोड़ना

Modernizr, सुविधा की पहचान करने वाला टूल है. यह Flexbox की सुविधा की जांच को आसान बनाता है.

index.html में मौजूद TODO 6.1 को, कस्टम Modernizr बिल्ड को शामिल करने वाले कोड से बदलें:

<script src="modernizr-custom.js"></script>

जानकारी

हम index.html के सबसे ऊपर Modernizr build को शामिल करते हैं. यह Flexbox की सुविधा की जांच करता है. यह पेज लोड होने पर टेस्ट चलाता है. साथ ही, अगर ब्राउज़र Flexbox के साथ काम करता है, तो <html> एलिमेंट में flexbox क्लास जोड़ता है. इसके अलावा, यह no-flexbox एलिमेंट में no-flexbox क्लास जोड़ता है.<html> अगले सेक्शन में, हम इन क्लास को सीएसएस में जोड़ते हैं.

ध्यान दें: अगर हम Flexbox की flex-wrap प्रॉपर्टी का इस्तेमाल कर रहे होते, तो हमें इस सुविधा के लिए एक अलग Modernizr डिटेक्टर जोड़ना पड़ता. कुछ ब्राउज़र के पुराने वर्शन में Flexbox की सुविधा आंशिक रूप से काम करती है. साथ ही, उनमें यह सुविधा शामिल नहीं होती.

फ़्लेक्सबॉक्स का इस्तेमाल धीरे-धीरे करना

आइए, सीएसएस में flexbox और no-flexbox क्लास का इस्तेमाल करें, ताकि Flexbox काम न करने पर फ़ॉलबैक नियम दिए जा सकें.

अब styles/main.css में, हमने जिन नियमों के आगे टिप्पणी की है उनके आगे .no-flexbox जोड़ें:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

उसी फ़ाइल में, बाकी नियमों के आगे .flexbox जोड़ें:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

अगर आपने वैकल्पिक चरण 5.3 पूरा कर लिया है, तो अलग-अलग कॉलम के नियमों में .flexbox जोड़ना न भूलें.

कोड को सेव करें और ब्राउज़र में index.html को रीफ़्रेश करें. पेज पहले जैसा ही दिखेगा. हालांकि, अब यह किसी भी डिवाइस पर किसी भी ब्राउज़र में अच्छी तरह काम करेगा. अगर आपके पास ऐसा ब्राउज़र है जो फ़्लेक्सबॉक्स के साथ काम नहीं करता, तो उस ब्राउज़र में index.html खोलकर फ़ॉलबैक नियमों को टेस्ट किया जा सकता है.

अधिक जानकारी के लिए

Flexbox पर माइग्रेट करना - कटिंग द मस्टर्ड
Modernizr के दस्तावेज़

आपने अपने कॉन्टेंट को रिस्पॉन्सिव बनाने के लिए, उसे स्टाइल करना सीख लिया है. मीडिया क्वेरी का इस्तेमाल करके, उपयोगकर्ता के डिवाइस की विंडो या स्क्रीन के साइज़ के हिसाब से, अपने कॉन्टेंट का लेआउट बदला जा सकता है.

हमने क्या-क्या कवर किया है

विज़ुअल व्यूपोर्ट सेट करना
Flexbox
मीडिया क्वेरी

संसाधन

रिस्पॉन्सिव डिज़ाइन (स्क्रीन के हिसाब से साइज़ बदलने वाला डिज़ाइन) के बारे में बुनियादी बातें जानें

प्रोग्रेसिव एन्हांसमेंट के तौर पर फ़्लेक्सबॉक्स के बारे में ज़्यादा जानें

रिस्पॉन्सिव सीएसएस के लिए लाइब्रेरी के बारे में जानें

मीडिया क्वेरी इस्तेमाल करने के बारे में ज़्यादा जानें

मीडिया क्वेरी का इस्तेमाल करना

PWA ट्रेनिंग कोर्स में मौजूद सभी कोडलैब देखने के लिए, कोर्स का वेलकम कोडलैब देखें/