उत्तरदायी वेबसाइट बनाने के लिए HTML और CSS में मीडिया प्रश्नों का उपयोग कैसे करें

उत्तरदायी वेबसाइट बनाने के लिए HTML और CSS में मीडिया प्रश्नों का उपयोग कैसे करें

यदि आप वेबसाइट/वेब एप्लिकेशन विकसित करना चाहते हैं, तो आपकी सफलता के लिए उत्तरदायी डिजाइन बनाने का तरीका जानना आवश्यक है।





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



मीडिया प्रश्नों का उपयोग करना यह सुनिश्चित करने का सबसे अच्छा तरीका है कि आपकी वेबसाइट/वेब ऐप ठीक उसी तरह दिखाई दे जैसा आप इसे हर डिवाइस पर दिखाना चाहते हैं।





उत्तरदायी डिजाइन को समझना

संक्षेप में, उत्तरदायी डिज़ाइन एक वेबसाइट/वेब ऐप लेआउट बनाने के लिए HTML/CSS का उपयोग करने से संबंधित है जो विभिन्न स्क्रीन आकारों के अनुकूल है। HTML/CSS में वेबसाइट डिज़ाइन में प्रतिक्रियात्मकता प्राप्त करने के कुछ अलग तरीके हैं:

  • पिक्सल (पीएक्स) के बजाय रेम और एम इकाइयों का उपयोग करना
  • प्रत्येक वेबपेज का व्यूपोर्ट/स्केल सेट करना
  • मीडिया प्रश्नों का उपयोग करना

मीडिया प्रश्न क्या हैं?

मीडिया क्वेरी CSS की एक विशेषता है जिसे CSS3 संस्करण में जारी किया गया था। इस नई सुविधा के आने से सीएसएस के उपयोगकर्ता डिवाइस/स्क्रीन की ऊंचाई, चौड़ाई और ओरिएंटेशन (लैंडस्केप या पोर्ट्रेट मोड) के आधार पर वेबपेज के डिस्प्ले को एडजस्ट करने की क्षमता हासिल कर लेते हैं।



और पढ़ें: आवश्यक CSS3 गुण पत्रक धोखा

मीडिया प्रश्न एक बार कोड बनाने और आपके पूरे कार्यक्रम में कई बार इसका उपयोग करने के लिए एक रूपरेखा प्रदान करते हैं। यदि आप केवल तीन वेब पेजों के साथ एक वेबसाइट विकसित कर रहे हैं तो यह इतना उपयोगी नहीं लग सकता है, लेकिन यदि आप सैकड़ों अलग-अलग वेब पेज वाली कंपनी के लिए काम कर रहे हैं- यह एक बड़े पैमाने पर समय बचाने वाला साबित होगा।



मीडिया प्रश्नों का उपयोग करना

मीडिया प्रश्नों का उपयोग करते समय आपको कई अलग-अलग बातों पर ध्यान देने की आवश्यकता होती है: संरचना, प्लेसमेंट, श्रेणी और लिंकिंग।

मीडिया प्रश्नों की संरचना

मीडिया क्वेरी संरचना का उदाहरण


@media only/not media-type and (expression){
/*CSS code*/
}

मीडिया क्वेरी की सामान्य संरचना में शामिल हैं:



  • @मीडिया कीवर्ड
  • नॉट/ओनली कीवर्ड
  • एक मीडिया-प्रकार (जो या तो स्क्रीन, प्रिंट या भाषण हो सकता है)
  • कीवर्ड और
  • कोष्ठकों में संलग्न एक अनूठी अभिव्यक्ति
  • सीएसएस कोड खुले और करीबी घुंघराले ब्रेसिज़ की एक जोड़ी में संलग्न है।

सम्बंधित: मुद्रण के लिए दस्तावेज़ों को प्रारूपित करने के लिए CSS का उपयोग करना

केवल कीवर्ड वाली मीडिया क्वेरी का उदाहरण


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

ऊपर दिया गया उदाहरण CSS स्टाइलिंग (विशेष रूप से एक नीली पृष्ठभूमि का रंग) को केवल 450px की चौड़ाई वाली डिवाइस स्क्रीन पर लागू करता है और इसलिए मूल रूप से स्मार्टफ़ोन। केवल कीवर्ड को नॉट कीवर्ड से बदला जा सकता है और फिर ऊपर मीडिया क्वेरी में CSS स्टाइलिंग केवल प्रिंट और स्पीच पर लागू होगी।

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

डिफ़ॉल्ट मीडिया क्वेरी उदाहरण


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

मीडिया प्रश्नों का प्लेसमेंट

एक मीडिया क्वेरी एक सीएसएस संपत्ति है; इसलिए, इसका उपयोग केवल स्टाइलिंग भाषा के भीतर ही किया जा सकता है। आपके कोड में CSS को शामिल करने के तीन अलग-अलग तरीके हैं; हालांकि, इनमें से केवल दो विधियां आपके कार्यक्रमों में मीडिया प्रश्नों को शामिल करने का एक व्यावहारिक तरीका प्रदान करती हैं—आंतरिक या बाहरी सीएसएस।

आंतरिक विधि में HTML फ़ाइल के टैग में टैग जोड़ना और टैग के पैरामीटर के भीतर मीडिया क्वेरी बनाना शामिल है।

बाहरी विधि में बाहरी सीएसएस फ़ाइल में मीडिया क्वेरी बनाना और टैग के माध्यम से इसे आपकी HTML फ़ाइल से जोड़ना शामिल है।

मीडिया प्रश्नों की श्रेणी

चाहे मीडिया प्रश्नों का उपयोग आंतरिक या बाहरी CSS के माध्यम से किया जाता है, स्टाइलिंग भाषा का एक प्रमुख पहलू है जो मीडिया क्वेरी के कार्य करने के तरीके पर प्रतिकूल प्रभाव डाल सकता है। सीएसएस में वरीयता नियम का क्रम है। CSS चयनकर्ता , या इस मामले में मीडिया क्वेरी का उपयोग करते समय, CSS फ़ाइल में जोड़ी जाने वाली प्रत्येक नई मीडिया क्वेरी पहले आने वाली क्वेरी को ओवरराइड करती है (या प्राथमिकता लेती है)।

हमारे पास जो डिफ़ॉल्ट मीडिया क्वेरी कोड है, वह स्मार्टफ़ोन (450px चौड़ा और नीचे) को लक्षित करता है, इसलिए यदि आप टैबलेट के लिए एक अलग पृष्ठभूमि सेट करना चाहते हैं तो आप सोच सकते हैं कि आप अपनी पूर्व-मौजूदा सीएसएस फ़ाइल में निम्न कोड जोड़ सकते हैं।

टेबलेट मीडिया क्वेरी उदाहरण


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

एकमात्र समस्या यह है कि, वरीयता क्रम के कारण, टैबलेट में लाल पृष्ठभूमि रंग होगा और स्मार्टफ़ोन में अब लाल पृष्ठभूमि रंग भी होगा क्योंकि 450px और उससे कम 800px से कम है।

इस छोटी सी समस्या को हल करने का एक तरीका स्मार्टफोन के लिए टैबलेट के लिए मीडिया क्वेरी को पहले जोड़ना होगा; बाद वाला पहले वाले को ओवरराइड कर देगा और अब आपके पास नीले रंग के बैकग्राउंड वाले स्मार्टफोन और लाल बैकग्राउंड वाले टैबलेट होंगे।

हालांकि, वरीयता के क्रम के बारे में चिंतित हुए बिना स्मार्टफोन और टैबलेट के लिए अलग स्टाइल प्राप्त करने का एक बेहतर तरीका है। यह मीडिया प्रश्नों की एक विशेषता है जिसे श्रेणी विनिर्देश के रूप में जाना जाता है, जहां डेवलपर अधिकतम और न्यूनतम चौड़ाई (रेंज) के साथ मीडिया क्वेरी बना सकता है।

रेंज उदाहरण के साथ टैबलेट मीडिया क्वेरी


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

ऊपर दिए गए उदाहरण के साथ स्टाइलशीट के भीतर मीडिया प्रश्नों की नियुक्ति अप्रासंगिक हो जाती है क्योंकि टैबलेट और स्मार्टफोन के लिए डिज़ाइन चौड़ाई के दो अलग-अलग संग्रहों को लक्षित करता है।

यदि आप अपने सीएसएस कोड में मीडिया प्रश्नों को एम्बेड नहीं करना चाहते हैं, तो एक वैकल्पिक तरीका है जिसका आप उपयोग कर सकते हैं। इस पद्धति में HTML फ़ाइल के टैग में मीडिया प्रश्नों का उपयोग करना शामिल है, इसलिए एक विशाल स्टाइलशीट होने के बजाय जिसमें स्मार्टफ़ोन, टैबलेट और कंप्यूटर के लिए स्टाइल प्राथमिकताएं शामिल हैं- आप तीन अलग-अलग CSS फाइलों का उपयोग कर सकते हैं और टैग में अपनी मीडिया क्वेरी बना सकते हैं।

टैग एक HTML तत्व है जिसका उपयोग बाहरी स्टाइलशीट से CSS स्टाइल आयात करने के लिए किया जाता है। इस टैग में एक मीडिया प्रॉपर्टी है जो उसी तरह काम करती है जैसे कोई मीडिया क्वेरी CSS में करती है।




href='tablet.css'>


उपरोक्त कोड को आपकी HTML फ़ाइल के टैग में रखा जाना चाहिए। अब आपको केवल तीन अलग-अलग CSS फाइलें बनाने की जरूरत है, जिनका नाम main.css, tablet.css, और Smartphone.css है—फिर वह विशिष्ट डिज़ाइन बनाएं जो आप प्रत्येक डिवाइस के लिए चाहते हैं।

मुख्य फ़ाइल की शैली 800px से अधिक चौड़ाई वाली सभी स्क्रीन पर लागू होगी, टैबलेट फ़ाइल की शैली 450px और 801px के बीच की चौड़ाई वाली सभी स्क्रीन पर लागू होगी, और स्मार्टफ़ोन फ़ाइल की शैली नीचे की सभी स्क्रीन पर लागू होगी 451px।

एक्सबॉक्स वन अब वाईफाई से कनेक्ट नहीं होगा

अब आपके पास रिस्पॉन्सिव डिज़ाइन बनाने के लिए टूल हैं

यदि आपने इसे इस लेख के अंत तक बनाया है तो आप यह जानने में सक्षम थे कि उत्तरदायी डिज़ाइन क्या है और यह क्यों उपयोगी है। अब आप CSS और HTML फ़ाइलों में मीडिया प्रश्नों की पहचान कर सकते हैं और उनका उपयोग कर सकते हैं। इसके अतिरिक्त, आपको सीएसएस में वरीयता के क्रम से परिचित कराया गया और देखा गया कि यह कैसे प्रभावित कर सकता है कि आपकी मीडिया क्वेरी कैसे काम करती है।

छवि क्रेडिट: नकारात्मक स्थान/ पेक्सल्स

साझा करना साझा करना कलरव ईमेल CSS में बैकग्राउंड इमेज कैसे सेट करें

वेबपेजों को स्टाइल करने के लिए CSS एक शक्तिशाली उपकरण है। बैकग्राउंड इमेज लगाने का तरीका सीखना आपको बहुत सी CSS बेसिक्स सिखाता है।

आगे पढ़िए संबंधित विषय
  • प्रोग्रामिंग
  • वेब विकास
  • वेब डिजाइन
  • सीएसएस
लेखक के बारे में कदीशा कीन(21 लेख प्रकाशित)

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

कदीशा कीन . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें