CSS Media Queries: रिस्पॉन्सिव वेब डिज़ाइन के लिए मीडिया क्वेरीज़ का पूरा गाइड

रिस्पॉन्सिव वेब डिज़ाइन और मीडिया क्वेरीज़

विभिन्न डिवाइसेज़ के साथ कम्पैटिबल वेबसाइट्स डिज़ाइन करना यह सुनिश्चित करने में एक महत्वपूर्ण कदम है कि वेबसाइट अधिक से अधिक विभिन्न यूज़र्स के लिए सुलभ है।

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

रिस्पॉन्सिव वेब डिज़ाइन क्या है?

रिस्पॉन्सिव वेब डिज़ाइन प्रथाओं का एक समूह है जहां एक डेवलपर साइट पर स्टाइलशीट को ऑप्टिमाइज़ करता है ताकि साइट को विभिन्न डिवाइसेज़ और स्क्रीन साइज़ की एक विस्तृत श्रृंखला पर सही ढंग से रेंडर किया जा सके।

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

जबकि रिस्पॉन्सिव वेब डिज़ाइन में प्रथाओं की एक विस्तृत श्रृंखला शामिल है - फ्लेक्सबॉक्स के उपयोग से लेकर रिलेटिव स्टाइल्स तक - मीडिया क्वेरीज़ किसी भी वेबसाइट का एक महत्वपूर्ण हिस्सा हैं जिसे वेब रिस्पॉन्सिवनेस को ध्यान में रखकर डिज़ाइन किया गया है।

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

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

मीडिया क्वेरी सिंटैक्स

CSS में मीडिया क्वेरी घोषित करने के लिए, आपको @media नियम का उपयोग करना होगा। यह नियम आपको CSS प्रॉपर्टीज़ के एक ब्लॉक को केवल तभी निष्पादित करने की अनुमति देता है जब एक निश्चित शर्त true मूल्यांकन करती है।

बेसिक सिंटैक्स

@media media-type and (media-rule) { 
  /* CSS स्टाइल्स */ 
}

मुख्य घटक

• @media ब्राउज़र को मीडिया क्वेरी बनाने का निर्देश देता है।
• media-type वह मीडिया प्रकार है जिसके लिए कोड उपयोग किया जाएगा (जैसे screen या print)।
• and एक लॉजिकल ऑपरेटर है जिसका उपयोग हमें मीडिया टाइप और मीडिया रूल दोनों निर्दिष्ट करते समय करना होता है।
• media-rule वह कथन है जो CSS को मीडिया क्वेरी में निष्पादित करने के लिए true मूल्यांकन करना चाहिए।
• CSS styles वे नियम हैं जो वेब एलिमेंट पर लागू होंगे यदि media-rule true मूल्यांकन करता है।

मीडिया टाइप्स

मीडिया क्वेरी के साथ उपयोग किए जा सकने वाले चार मीडिया टाइप्स हैं: all, print, screen, और speech। डिफ़ॉल्ट रूप से, all वैल्यू उपयोग की जाती है, और कई मीडिया टाइप्स को कॉमा का उपयोग करके प्रत्येक टाइप को अलग करके निर्दिष्ट किया जा सकता है।

CSS मीडिया रूल्स (Media Rules)

कुछ नियम प्रकार हैं जिन्हें मीडिया क्वेरी पर लागू किया जा सकता है। आइए इनमें से प्रत्येक को व्यक्तिगत रूप से तोड़कर देखें।

विड्थ और हाइट (Width and Height)

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

width और height नियमों का उपयोग किसी स्टाइल को लागू करने के लिए किया जाता है यदि व्यूपोर्ट बिल्कुल एक निश्चित आकार के बराबर है। इसलिए, यदि आप वेब पेज पर सभी <p> टैग्स के टेक्स्ट रंग को नीला बदलना चाहते हैं यदि व्यूपोर्ट 500px लंबा है, तो आप निम्न नियम का उपयोग करके ऐसा कर सकते हैं:

@media screen and (width: 500px) { 
  p { color: blue; } 
}

यह नियम सभी <p> टैग्स के टेक्स्ट रंग को blue पर सेट करता है यदि व्यूपोर्ट की चौड़ाई बिल्कुल 500px है।

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

यदि हम व्यूपोर्ट चौड़ाई 500px के बराबर या उससे अधिक होने पर सभी <p> एलिमेंट्स के टेक्स्ट रंग को नीला बदलना चाहते हैं, तो हम निम्न नियम का उपयोग कर सकते हैं:

@media screen and (min-width: 500px) { 
  p { color: blue; } 
}

यह नियम सभी <p> एलिमेंट्स के टेक्स्ट रंग को नीला सेट करता है, लेकिन केवल तभी जब व्यूपोर्ट चौड़ाई 500px के बराबर या उससे अधिक हो। इस मीडिया क्वेरी का काम करने का तरीका यह है कि शर्त min-width: 500px का मूल्यांकन किया जाता है, जो जांचता है कि व्यूपोर्ट चौड़ाई 500px के बराबर या उससे अधिक है या नहीं। यदि यह शर्त true मूल्यांकन करती है, तो हमारे p स्टाइल में नियम वेब पेज पर लागू होते हैं।

ओरिएंटेशन (Orientation)

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

मान लीजिए हम चाहते हैं कि सभी h2 एलिमेंट्स का टेक्स्ट साइज़ 20px पर सेट हो यदि यूज़र हमारे वेब पेज को लैंडस्केप मोड में देख रहा है। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:

@media (orientation: landscape) { 
  h2 { font-size: 20px; } 
}

यह नियम जांचता है कि क्या यूज़र वेब पेज को लैंडस्केप मोड में देख रहा है, और यदि वह शर्त true मूल्यांकन करती है तो सभी <h2> एलिमेंट्स का फॉन्ट साइज़ 20px पर सेट करता है।

डिफ़ॉल्ट रूप से, डेस्कटॉप लैंडस्केप ओरिएंटेशन का उपयोग करते हैं।

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

आइए दो उदाहरण मीडिया क्वेरीज़ के माध्यम से चलते हैं ताकि यह समझ सकें कि आप CSS में अपनी खुद की मीडिया क्वेरीज़ कैसे लिख सकते हैं।

उदाहरण 1: एलिमेंट छिपाना (Hide Element)

मान लीजिए हम एक वेबसाइट डिज़ाइन कर रहे हैं और हम चाहते हैं कि एक बॉक्स दिखाई दे जो सभी मोबाइल डिवाइसेज़ पर This site is in beta दिखाता है। यह बॉक्स केवल मोबाइल डिवाइसेज़ पर दिखाई देना चाहिए क्योंकि हम अभी भी अपने मोबाइल अनुभव का परीक्षण कर रहे हैं।

हम निम्न कोड का उपयोग करके यह बॉक्स बना सकते हैं:

<html>
  <p class="betaBox">This site is in beta.</p>
</html>
<style>
  .betaBox { 
    background-color: orange; 
    padding: 10px; 
  }
  @media screen and (max-width: 600px) { 
    .betaBox { display: none; } 
  }
</style>

आइए हमारे कोड को तोड़कर देखें। हमारी HTML फाइल में, हमने एक <p> टैग परिभाषित किया है जिसमें This site is in beta टेक्स्ट शामिल है। <p> टैग को असाइन की गई क्लास betaBox है।

हमारी CSS फाइल में, हमने दो स्टाइल्स निर्दिष्ट किए। .betaBox स्टाइल betaBox क्लास नाम वाले किसी भी एलिमेंट के बैकग्राउंड कलर को नारंगी पर सेट करता है और एलिमेंट के कंटेंट और उसके बॉर्डर्स के बीच 10px पैडिंग स्पेस बनाता है।

अगला नियम मीडिया क्वेरी का उपयोग करता है। हमारी मीडिया क्वेरी में, max-width: 600px हमारे ब्राउज़र को बताता है कि स्टाइल नियम केवल तभी लागू होना चाहिए यदि व्यूपोर्ट 600px से संकरा है। इसलिए, यदि यूज़र हमारी साइट को मोबाइल डिवाइस पर देखता है, तो यह स्टाइल लागू होगा।

यदि हमारी मीडिया क्वेरी निष्पादित होती है, तो display: none नियम .betaBox क्लास नाम वाले हर एलिमेंट पर लागू होता है।

उदाहरण 2: मल्टीपल मीडिया क्वेरीज़ - फॉन्ट साइज़

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

मान लीजिए हम एक वेबसाइट डिज़ाइन कर रहे हैं और हम चाहते हैं कि हमारे <h1> हेडर्स का फॉन्ट साइज़ स्क्रीन साइज़ के आधार पर बदल जाए। यहां वे नियम हैं जिन्हें हम अपनी साइट पर लागू करना चाहते हैं:

• यदि स्क्रीन की चौड़ाई 480px के बराबर या उससे कम है, तो हमारे हेडर्स का फॉन्ट साइज़ 16px होना चाहिए।
• यदि स्क्रीन की चौड़ाई 481px के बराबर है और 600px के बराबर या उससे कम है, तो हेडर फॉन्ट साइज़ 20px होना चाहिए।
• यदि स्क्रीन की चौड़ाई 601px के बराबर या उससे अधिक है, तो हेडर फॉन्ट साइज़ 24px होना चाहिए।

हम अपनी वेब पेज पर फॉन्ट्स का आकार बदलने के लिए यूज़र की स्क्रीन के आकार के आधार पर निम्न तीन मीडिया क्वेरीज़ का उपयोग कर सकते हैं:

<html>
  <h1>This is an example header.</h1>
</html>
<style>
  @media screen and (max-width: 480px) { 
    h1 { font-size: 16px; } 
  }
  @media screen and (min-width: 481px) and (max-width: 600px) { 
    h1 { font-size: 20px; } 
  }
  @media screen and (min-width: 601px) { 
    h1 { font-size: 24px; } 
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

आइए देखें कि हमारा कोड कैसे काम करता है। हमारी HTML फाइल में, हमने <h1> टैग का उपयोग करके एक उदाहरण हेडर परिभाषित किया जो This is an example header टेक्स्ट दिखाता है।

फिर, हमारी CSS फाइल में, हमने तीन मीडिया क्वेरीज़ परिभाषित कीं।

1. पहली मीडिया क्वेरी जांचती है कि ब्राउज़र व्यूपोर्ट का आकार 480px के बराबर या उससे कम है या नहीं (max-width: 480px का उपयोग करके), और यदि यह कथन true मूल्यांकन करता है तो सभी <h1> एलिमेंट्स का फॉन्ट साइज़ 16px पर सेट करती है।
2. दूसरी मीडिया क्वेरी जांचती है कि व्यूपोर्ट का आकार 481px के बराबर या उससे अधिक है (min-width: 481px का उपयोग करके) और 600px के बराबर या उससे कम है (max-width: 600px का उपयोग करके)। यदि यह true मूल्यांकन करता है, तो सभी <h1> एलिमेंट्स का फॉन्ट साइज़ 20px पर सेट किया जाता है।
3. तीसरी मीडिया क्वेरी जांचती है कि व्यूपोर्ट का आकार 601px से अधिक है (min-width: 601px का उपयोग करके)। यदि यह नियम true मूल्यांकन करता है, तो सभी <h1> एलिमेंट्स का फॉन्ट साइज़ 24px पर बदल दिया जाता है।

मीडिया क्वेरी ब्रेकपॉइंट्स (Media Query Breakpoints)

ब्रेकपॉइंट्स का उपयोग उन बिंदुओं को सेट करने के लिए किया जाता है जहां वेबसाइट मीडिया क्वेरी लागू करेगी।

जब आप मीडिया क्वेरी डिज़ाइन कर रहे होते हैं, तो आप अपने आप से पूछ सकते हैं: मुझे अपनी मीडिया क्वेरीज़ सेट करने के लिए किन साइज़ का उपयोग करना चाहिए? यह एक उचित सवाल है, क्योंकि जब आप रिस्पॉन्सिव वेब डिज़ाइन के साथ शुरुआत कर रहे होते हैं तो आपको उन डिवाइसेज़ के साइज़ का पता लगाना मुश्किल हो सकता है जिन पर आपकी वेबसाइट रेंडर होनी चाहिए।

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

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

फिर, एक बार जब आप इन बिंदुओं की पहचान कर लेते हैं, तो आप कस्टम मीडिया रूल्स लिख सकते हैं। उदाहरण के लिए, आपको पता चल सकता है कि <div> टैग उन डिवाइसेज़ पर सही ढंग से रेंडर नहीं करता जिनकी चौड़ाई 500px से कम है। उस स्थिति में, आप इस रिज़ॉल्यूशन के लिए कस्टम स्टाइल्स डिज़ाइन करने के लिए मीडिया क्वेरी लिखना चाहेंगे।

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

• अधिकांश फोन्स: @media screen and (max-width: 600px) {}
• पोर्ट्रेट टैबलेट्स और बड़े फोन्स: @media screen and (min-width: 600px) {}
• लैंडस्केप टैबलेट्स: @media screen and (min-width: 768px) {}
• लैपटॉप्स और डेस्कटॉप मशीन्स: @media screen (min-width: 992px) {}
• बड़े लैपटॉप्स और डेस्कटॉप मशीन्स: @media screen (min-width: 1200px) {}

ये नियम आपकी मीडिया क्वेरीज़ के लिए ब्रेकपॉइंट्स निर्धारित करने में आपकी मदद करने के लिए एक शुरुआती बिंदु प्रदान करेंगे, लेकिन आप अपनी वेबसाइट की विशेष आवश्यकताओं के अनुरूप कुछ बदलाव कर सकते हैं।

निष्कर्ष

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

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