विभिन्न उपकरणों में संगत वेबसाइटों को डिजाइन करना यह सुनिश्चित करने के लिए एक महत्वपूर्ण कदम है कि एक वेबसाइट अधिक से अधिक विभिन्न उपयोगकर्ताओं के लिए सुलभ हो।
यहीं पर मीडिया के प्रश्न आते हैं। CSS मीडिया क्वेरीज़ आपको CSS नियम लागू करने की अनुमति केवल तभी देती है जब ब्राउज़र आपके द्वारा परिभाषित नियम से मेल खाता हो। तो, आप एक नियम को परिभाषित कर सकते हैं जो केवल तभी लागू होता है जब कोई उपयोगकर्ता स्मार्टफोन पर वेब पेज देख रहा हो।
यह ट्यूटोरियल उदाहरणों के साथ, उत्तरदायी वेब डिज़ाइन की मूल बातें, मीडिया क्वेरी कैसे काम करता है, और अपने स्वयं के CSS मीडिया प्रश्नों को कैसे डिज़ाइन करें, इस पर चर्चा करेगा। इस ट्यूटोरियल को पढ़ने के अंत तक, आप CSS में मीडिया प्रश्नों को डिजाइन करने के विशेषज्ञ होंगे।
रिस्पॉन्सिव वेब डिज़ाइन और मीडिया क्वेरीज़
रिस्पॉन्सिव वेब डिज़ाइन उन प्रथाओं के एक सेट को संदर्भित करता है जहां एक डेवलपर साइट पर एक स्टाइल शीट को अनुकूलित करता है ताकि साइट को विभिन्न उपकरणों और स्क्रीन आकारों की एक विस्तृत श्रृंखला पर सही ढंग से प्रस्तुत किया जा सके।
उत्तरदायी वेब डिज़ाइन इतना महत्वपूर्ण होने का कारण यह है कि एक वेब पेज को देखने के लिए एक दर्शक जिस आउटपुट डिवाइस का उपयोग करता है - और उसकी ब्राउज़र विंडो और स्क्रीन का आकार - वेब पेज के लोड होने के तरीके को प्रभावित करेगा। यदि कोई वेबसाइट विभिन्न उपकरणों और स्क्रीन आकारों को ध्यान में रखकर नहीं बनाई गई है, तो कुछ उपयोगकर्ता वेबसाइट पर प्रस्तुत सभी सामग्री को देखने के लिए संघर्ष कर सकते हैं।
जबकि रिस्पॉन्सिव वेब डिज़ाइन में कई तरह के अभ्यास शामिल हैं - फ्लेक्सबॉक्स का उपयोग करने से लेकर सापेक्ष शैलियों तक - मीडिया क्वेरीज़ किसी भी वेबसाइट का एक महत्वपूर्ण हिस्सा हैं जिसे वेब रिस्पॉन्सिबिलिटी को ध्यान में रखकर बनाया गया है।
मीडिया क्वेरीज़ आपको उपयोग किए गए डिवाइस के प्रकार, डिवाइस के ओरिएंटेशन और व्यूपोर्ट आकार के आधार पर वेब पेज पर शैलियों के प्रकट होने के तरीके को समायोजित करने की अनुमति देती हैं।
मीडिया प्रश्नों का उपयोग करके, आप अपनी वेबसाइट पर अलग-अलग स्क्रीन और उपकरणों के आधार पर तत्वों को अलग-अलग प्रदर्शित कर सकते हैं, जिसके माध्यम से उपयोगकर्ता आपकी साइट देख रहा है।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
मीडिया क्वेरी सिंटैक्स
CSS में मीडिया क्वेरी घोषित करने के लिए, आपको @media . का उपयोग करना होगा नियम। यह नियम आपको CSS गुणों के एक ब्लॉक को केवल तभी निष्पादित करने की अनुमति देता है जब एक निश्चित शर्त का मूल्यांकन सही होता है।
यहाँ एक CSS मीडिया क्वेरी के लिए मूल सिंटैक्स है:
@media मीडिया-टाइप और (मीडिया-नियम) {// CSS स्टाइल}
इस मीडिया क्वेरी के मुख्य घटक इस प्रकार हैं:
- @मीडिया ब्राउज़र को मीडिया क्वेरी बनाने का निर्देश देता है।
- मीडिया-प्रकार मीडिया का प्रकार है जिसके लिए कोड का उपयोग किया जाएगा (यानी स्क्रीन या प्रिंट)।
- और एक तार्किक संचालिका है जिसे मीडिया प्रकार और मीडिया नियम दोनों को निर्दिष्ट करते समय हमें उपयोग करने की आवश्यकता होती है।
- मीडिया-नियम वह कथन है जिसे मीडिया क्वेरी में CSS को निष्पादित करने के लिए सही पर मूल्यांकन करना चाहिए।
- सीएसएस शैलियां वे नियम हैं जो किसी वेब तत्व पर लागू होंगे यदि मीडिया-नियम का मूल्यांकन सही होता है।
चार मीडिया प्रकार हैं जिनका उपयोग मीडिया क्वेरी के साथ किया जा सकता है। ये सभी हैं, प्रिंट, स्क्रीन और भाषण। डिफ़ॉल्ट रूप से, मान all का उपयोग किया जाता है, और कई मीडिया प्रकारों को अल्पविराम का उपयोग करके प्रत्येक प्रकार को अलग करके निर्दिष्ट किया जा सकता है।
सीएसएस मीडिया नियम
कुछ नियम प्रकार हैं जिन्हें मीडिया क्वेरी पर लागू किया जा सकता है। आइए इनमें से प्रत्येक को अलग-अलग तोड़ दें।
चौड़ाई और ऊंचाई
CSS मीडिया नियमों के साथ उपयोग किए जाने वाले मुख्य नियम प्रकार हैं डिवाइस की चौड़ाई और ऊंचाई। ये नियम हमें व्यूपोर्ट कंटेनर के आकार के आधार पर वेब तत्व पर शैलियों को लागू करने की अनुमति देते हैं। शब्द viewport container उपयोगकर्ता को दिखाई देने वाले वेब पेज के क्षेत्र को संदर्भित करता है।
चौड़ाई और ऊंचाई के नियमों का उपयोग शैली को लागू करने के लिए किया जाता है यदि व्यूपोर्ट एक निश्चित आकार के बराबर है। इसलिए, यदि आप वेब पेज पर सभी
टैग के टेक्स्ट रंग को नीला करना चाहते हैं, यदि व्यूपोर्ट 500px लंबा है, तो आप इस नियम का उपयोग करके ऐसा कर सकते हैं:
@मीडिया स्क्रीन और (चौड़ाई:500px) {p {रंग:नीला; }}
यह नियम सभी
टैग के टेक्स्ट रंग को blue . पर सेट करता है अगर व्यूपोर्ट की चौड़ाई ठीक 500px है।
हालांकि, अधिकांश मामलों में, आप श्रेणियों का उपयोग करके मीडिया क्वेरी लागू करना चाहेंगे। इसलिए, उदाहरण के लिए, यदि व्यूपोर्ट का आकार 500px के बराबर या उससे अधिक है, तो आप वेब पेज का फ़ॉन्ट आकार बदलना चाह सकते हैं। यहीं से न्यूनतम-चौड़ाई और न्यूनतम-ऊंचाई की शैलियाँ आती हैं।
अगर व्यूपोर्ट की चौड़ाई 500px से अधिक है, तो हम सभी
तत्वों के टेक्स्ट रंग को नीले रंग में बदलना चाहते हैं, हम निम्नलिखित नियम का उपयोग कर सकते हैं:
@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई:500px) {p {रंग:नीला; }}
यह नियम सभी
तत्वों के टेक्स्ट रंग को नीले रंग में सेट करता है, लेकिन केवल तभी जब व्यूपोर्ट की चौड़ाई 500px के बराबर या उससे अधिक हो। जिस तरह से यह मीडिया क्वेरी काम करती है वह न्यूनतम-चौड़ाई की स्थिति है:500px का मूल्यांकन किया जाता है, जो यह जांचता है कि व्यूपोर्ट की चौड़ाई 500px के बराबर या उससे अधिक है या नहीं। यदि यह स्थिति सत्य का मूल्यांकन करती है, तो हमारे p . में नियम शैली वेब पेज पर लागू होती है।
अभिविन्यास
इसके अलावा, डिवाइस के उन्मुखीकरण के आधार पर वेब पेज पर शैलियों को लागू करने के लिए मीडिया प्रश्नों का उपयोग किया जा सकता है।
मान लीजिए कि हम सभी h2 तत्वों के टेक्स्ट आकार को 20px पर सेट करना चाहते हैं यदि उपयोगकर्ता हमारे वेब पेज को लैंडस्केप मोड में देख रहा है। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
@media (ओरिएंटेशन:लैंडस्केप) {h2 {फ़ॉन्ट-साइज़:20px; }}
यह नियम जांचता है कि उपयोगकर्ता वेब पेज को लैंडस्केप मोड में देख रहा है या नहीं, और सभी
तत्वों के फ़ॉन्ट आकार को 20px पर सेट करता है यदि वह स्थिति सही पर मूल्यांकन करती है।
डिफ़ॉल्ट रूप से, डेस्कटॉप लैंडस्केप ओरिएंटेशन का उपयोग करते हैं।
CSS मीडिया क्वेरी उदाहरण
आइए दो उदाहरण मीडिया प्रश्नों के माध्यम से देखें कि आप CSS में अपने स्वयं के मीडिया प्रश्नों को कैसे लिख सकते हैं।
बुनियादी मीडिया क्वेरी उदाहरण:तत्व छुपाएं
मान लीजिए कि हम एक वेबसाइट डिजाइन कर रहे हैं और हम एक बॉक्स दिखाना चाहते हैं जो दिखाता है कि This site is in beta . सभी मोबाइल उपकरणों पर। यह बॉक्स केवल मोबाइल उपकरणों पर दिखाई देना चाहिए क्योंकि हम अभी भी अपने मोबाइल अनुभव का परीक्षण कर रहे हैं।
हम निम्नलिखित कोड का उपयोग करके इस बॉक्स को बना सकते हैं:
यह साइट बीटा में है।