यह पोस्ट मीडिया प्रश्नों को लागू करने के लिए आवश्यक दिशानिर्देशों का उल्लेख करेगी।
मोबाइल उपकरणों के लिए मीडिया क्वेरीज़ कैसे लागू करें?
मीडिया क्वेरी को केवल 'का उल्लेख करके मोबाइल उपकरणों पर लागू किया जा सकता है' @मीडिया छोटे ब्रेसिज़ में स्क्रीन आकार को टैग और निर्दिष्ट करें। उस मीडिया क्वेरी के लिए सीएसएस को घुंघराले ब्रेसिज़ के अंदर जोड़ा जा सकता है। जब भी स्क्रीन का आकार उपयोगकर्ता द्वारा निर्दिष्ट आकार से मिलता है, तो यह बताई गई मीडिया क्वेरी को लागू करेगा।
आइए मोबाइल उपकरणों के लिए मीडिया प्रश्नों के कार्यान्वयन को सीखने के लिए एक व्यावहारिक उदाहरण का अवलोकन करें।
उदाहरण: मीडिया क्वेरीज़ लागू करके एक लेआउट बनाएं जो दो कॉलम लेआउट से एक कॉलम लेआउट में बदलता है
नीचे दिए गए उदाहरण में, वेब पेज का लेआउट कॉलम लेआउट से सिंगल-कॉलम लेआउट में बदल जाएगा:
चरण 1: एक HTML संरचना बनाएं
- सबसे पहले, एक HTML फ़ाइल बनाएं और उसमें बाहरी CSS स्टाइलशीट फ़ाइल को लिंक करें <सिर> अनुभाग।
- फिर, एक बनाएं <शीर्षलेख> अनुभाग और का उपयोग करके वेबसाइट का शीर्षक जोड़ें टैग।
- एक बनाने के 'कंटेनर-क्लास' के वर्ग नाम से और इसके अंदर दो औरका वर्ग नाम ' स्तंभ ”। < शरीर >
<शीर्षलेख>
< एच 1 > लिनक्स संकेत < / एच 1 >
< / हेडर>
< डिव कक्षा = 'कंटेनर-वर्ग' >
< डिव कक्षा = 'स्तंभ' >
< एच 2 > खण्ड एक < / एच 2 >
< पी > Linux Hint सर्वश्रेष्ठ ई-लर्निंग प्लेटफ़ॉर्म में से एक है। < / पी >
< / डिव >
< डिव कक्षा = 'स्तंभ' >
< एच 2 > धारा दो < / एच 2 >
< पी > Linux Hint सर्वश्रेष्ठ ई-लर्निंग प्लेटफ़ॉर्म में से एक है। < / पी >
< / डिव >
< / डिव >
< / शरीर >चरण 2: सीएसएस लागू करें
शरीर अनुभाग पर:- सबसे पहले, 'बॉडी सेक्शन' लिखकर निर्दिष्ट करें शरीर टैग करें और घुंघराले ब्रेसिज़ का उल्लेख करें।
- ब्रेसिज़ के अंदर, फ़ॉन्ट परिवार, पृष्ठभूमि रंग, मार्जिन और पैडिंग निर्दिष्ट करें।
पर <शीर्षलेख> अनुभाग:
- टेक्स्ट रंग, टेक्स्ट संरेखण, पृष्ठभूमि रंग और पैडिंग निर्दिष्ट करें।
पर 'कंटेनर-वर्ग' डिव:
- ठीक ' प्रदर्शन 'संपत्ति का मूल्य' मोड़ना फ्लेक्सबॉक्स बनाने के लिए।
- उपयोग ' औचित्य-सामग्री ”सामग्री के बीच स्थान जोड़ने और पैडिंग जोड़ने के लिए।
स्तंभ वर्ग पर:
- सबसे पहले, बताए गए मान को ' मोड़ना दो लेआउट अनुभागों के बीच एक स्थान जोड़ने के लिए संपत्ति।
- उसके बाद, बैकग्राउंड कलर, बॉर्डर, पैडिंग और बॉक्स-साइज़िंग जोड़ें।
चरण 3: मीडिया क्वेरी लागू करें
- मोबाइल उपकरणों के लिए मीडिया क्वेरी लागू करने के लिए, सबसे पहले, ' जोड़ें @मीडिया ' टैग।
- फिर, मान निर्दिष्ट करें ' 768px 'जो मोबाइल उपकरणों के लिए विशिष्ट है' अधिकतम चौड़ाई छोटे ब्रेसिज़ के भीतर संपत्ति.
- उसके बाद, निर्दिष्ट करें ' स्तंभ ' का मान ' फ्लेक्स-दिशा 'संपत्ति जो' पर लागू होगी कंटेनर-क्लास' वर्ग। जब भी निर्दिष्ट स्क्रीन आकार का पता चलेगा तो यह दो कॉलमों को एक कॉलम में बदल देगा।
- अंत में, 'पर CSS लागू करें स्तंभ 'वर्ग और निर्दिष्ट करें' अंतर ' और ' मोड़ना 'मान:
फ़ॉन्ट-फ़ैमिली: सैन्स-सेरिफ़;
पृष्ठभूमि- रंग : चाँदी;
अंतर: 0 ;
गद्दी: 0 ;
}
हैडर {
पृष्ठभूमि- रंग : #2f4f4f;
पैडिंग: 20px;
मूलपाठ- संरेखित : केंद्र;
रंग : सफ़ेद;
}
.कंटेनर- कक्षा {
प्रदर्शन: फ्लेक्स;
औचित्य- सामग्री : अंतरिक्ष-बीच;
पैडिंग: 20px;
}
।स्तंभ {
मोड़ना: 0 1 कैल्क ( पचास % - 10px ) ;
सीमा : 1px ठोस हरा;
पृष्ठभूमि- रंग : सफ़ेद;
बॉक्स-आकार: बॉर्डर-बॉक्स;
पैडिंग: 20px;
}
@ मिडिया ( अधिकतम- चौड़ाई : 768px ) {
.कंटेनर- कक्षा {
फ्लेक्स-दिशा: स्तंभ;
}
।स्तंभ {
मोड़ना: 0 1 100 %;
मार्जिन-बॉटम: 20px;
}
}उत्पादन
मीडिया क्वेरी लागू करने के बाद वेब पेज का आउटपुट यहां दिया गया है। यह आउटपुट दो कॉलम वाला रिस्पॉन्सिव लेआउट है:
जब भी स्क्रीन मोबाइल के लिए मीडिया क्वेरी का उपयोग करके निर्दिष्ट आयामों को पूरा करती है, तो यह एक-कॉलम लेआउट में बदल जाती है:
निष्कर्ष
मोबाइल उपकरणों के लिए मीडिया क्वेरीज़ को लागू करने के लिए, सबसे पहले, ' शामिल करें व्यूपोर्ट ' में ' सिर ' अनुभाग। फिर, मोबाइल डिज़ाइन-विशिष्ट CSS लिखें। उसके बाद, '@मीडिया' टैग का उपयोग करके और मोबाइल स्क्रीन आकार निर्दिष्ट करके मीडिया क्वेरी जोड़ें। उदाहरण के लिए, टैबलेट के लिए 768px और मोबाइल फ़ोन के लिए 480px निर्दिष्ट करें। इस आलेख में मोबाइल उपकरणों के लिए मीडिया प्रश्नों को लागू करने की प्रक्रिया की व्याख्या की गई है।