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

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

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

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

रिस्पॉन्सिव डिज़ाइन को समझना

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

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

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

अधिक पढ़ें: आवश्यक CSS3 के गुण धोखा शीट

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

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

@मीडिया केवल / मीडिया-प्रकार और अभिव्यक्ति नहीं है {
/ * CSS कोड * /
}

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

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

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

@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 450px) {
तन{
पृष्ठभूमि-रंग: नीला;
}
}

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

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

/ * स्मार्टफोन के लिए डिजाइन * /
@मीडिया (अधिकतम-चौड़ाई: 450px) {
तन{
पृष्ठभूमि-रंग: नीला;
}
}

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

आंतरिक विधि में जोड़ना शामिल है

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

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

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

/ * गोलियों के लिए डिजाइन * /
@मीडिया (अधिकतम-चौड़ाई: 800px) {
तन{
पृष्ठभूमि-रंग: लाल;
}
}

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

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

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

/ * गोलियों के लिए डिजाइन * /
@मीडिया (अधिकतम-चौड़ाई: 800px) और (न्यूनतम-चौड़ाई: 451) {
तन{
पृष्ठभूमि-रंग: लाल;
}
}

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

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

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

 मुख्य स्टाइलशीट 

 टैबलेट स्टाइलशीट 
href = "tablet.css">
 स्मार्टफोन स्टाइलशीट 

उपरोक्त कोड में रखा जाना चाहिए

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

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

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

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

CSS में Background Image कैसे सेट करें

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

आगे पढ़िए

लेखक के बारे में