मीडिया क्वेरी

डिज़ाइनर, लोगों के हिसाब से अपने डिज़ाइन में बदलाव कर सकते हैं. इसका सबसे सही उदाहरण, उपयोगकर्ता के डिवाइस का नाप या आकार, उसकी चौड़ाई, डिवाइस का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वगैरह शामिल है. मीडिया क्वेरी का इस्तेमाल करके, डिज़ाइनर इन अलग-अलग नाप या आकार के हिसाब से जवाब दे सकते हैं.

मीडिया क्वेरी @media कीवर्ड (नियम के मुताबिक सीएसएस) से शुरू की जाती हैं और कई तरह के इस्तेमाल के उदाहरणों के लिए इनका इस्तेमाल किया जा सकता है.

अलग-अलग तरह के आउटपुट को टारगेट करें

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

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

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

इस तरह, अपनी स्टाइलशीट में @media ऐट-रूल का इस्तेमाल किया जा सकता है या एक अलग स्टाइलशीट बनाकर link एलिमेंट पर media एट्रिब्यूट का इस्तेमाल किया जा सकता है:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

अगर आपने सीएसएस के लिए कोई मीडिया टाइप नहीं चुना है, तो मीडिया टाइप की वैल्यू अपने-आप all हो जाएगी. सीएसएस के ये दो ब्लॉक एक जैसे हैं:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

एचटीएमएल की ये दो लाइनें भी एक जैसी हैं:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

क्वेरी की शर्तें

मीडिया टाइप में शर्तें जोड़ी जा सकती हैं. इन्हें मीडिया क्वेरी कहा जाता है. सीएसएस सिर्फ़ तब लागू की जाती है, जब मीडिया टाइप मैच करता हो और शर्त भी सही हो. इन स्थितियों को मीडिया सुविधाएं कहा जाता है.

यह मीडिया क्वेरी के लिए सिंटैक्स है:

@media type and (feature)

अगर आपकी स्टाइल किसी अलग स्टाइलशीट में हैं, तो link एलिमेंट पर मीडिया क्वेरी का इस्तेमाल किया जा सकता है:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

मान लें कि आपको इस आधार पर अलग-अलग स्टाइल लागू करने हैं कि ब्राउज़र विंडो लैंडस्केप मोड में है (व्यूपोर्ट की चौड़ाई इसकी ऊंचाई से ज़्यादा है) या पोर्ट्रेट मोड (व्यूपोर्ट की ऊंचाई इसकी चौड़ाई से ज़्यादा है). orientation नाम की एक मीडिया सुविधा है, जिसका इस्तेमाल यह जांचने के लिए किया जा सकता है कि:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

या अगर आपको अलग-अलग स्टाइलशीट चाहिए, तो:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

इस मामले में, मीडिया का टाइप all है. यह डिफ़ॉल्ट वैल्यू होती है. इसलिए, इसे हटाया जा सकता है:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

या अलग-अलग स्टाइलशीट का इस्तेमाल करके:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

अलग-अलग मीडिया टाइप, जैसे कि print के लिए, अलग-अलग स्टाइलशीट का इस्तेमाल करते समय, यह सही नहीं है कि हर मीडिया क्वेरी के लिए, अलग स्टाइलशीट का इस्तेमाल किया जाए. इसके बजाय, @media के नियमों के मुताबिक बनाए गए कोड का इस्तेमाल करें.

व्यूपोर्ट के साइज़ के हिसाब से स्टाइल में बदलाव करना

प्रतिक्रियाशील डिज़ाइन के लिए, सबसे उपयोगी मीडिया सुविधाओं में से एक में ब्राउज़र व्यूपोर्ट के आयाम शामिल होते हैं. ब्राउज़र विंडो की चौड़ाई तय सीमा से ज़्यादा होने पर, स्टाइल लागू करने के लिए, min-width का इस्तेमाल करें.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

तय चौड़ाई से कम वाली स्टाइल को लागू करने के लिए, max-width मीडिया सुविधा का इस्तेमाल करें:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

मीडिया क्वेरी में, सीएसएस की किसी भी लंबाई की यूनिट का इस्तेमाल किया जा सकता है. अगर आपका कॉन्टेंट ज़्यादातर इमेज पर आधारित है, तो पिक्सल आपके काम का हो सकता है. अगर आपकी सामग्री ज़्यादातर टेक्स्ट पर आधारित है, तो टेक्स्ट के साइज़, जैसे कि em या ch के हिसाब से रिलेटिव यूनिट का इस्तेमाल करना बेहतर होगा:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

एक से ज़्यादा शर्त लागू करने के लिए, मीडिया क्वेरी भी मिलाई जा सकती हैं. अपनी मीडिया क्वेरी को मिलाने के लिए and शब्द का इस्तेमाल करें:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

कॉन्टेंट के हिसाब से ब्रेकपॉइंट चुनें

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

इस उदाहरण में, 50em वह बिंदु है जहां टेक्स्ट की लाइनें असामान्य रूप से लंबी हो जाती हैं. इसलिए, इंटरफ़ेस को पढ़ने में आसान बनाने के लिए, एक ब्रेकपॉइंट बनाया जाता है. column-count प्रॉपर्टी का इस्तेमाल करके, टेक्स्ट को उसी बिंदु से दो कॉलम में बांटा जाता है.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

कॉम्बिनेशन

मीडिया क्वेरी का इस्तेमाल, सिर्फ़ चौड़ाई के हिसाब से ही नहीं, बल्कि व्यूपोर्ट की ऊंचाई के आधार पर किया जा सकता है. यह इंटरफ़ेस सामग्री को "फ़ोल्ड के ऊपर" ऑप्टिमाइज़ करने के लिए उपयोगी हो सकता है. पिछले उदाहरण में, अगर पाठक किसी चौड़ी, लेकिन छोटी ब्राउज़र विंडो का इस्तेमाल कर रहे हैं, तो उन्हें पहले एक कॉलम में नीचे की ओर स्क्रोल करके, फिर से ऊपर की ओर स्क्रोल करके दूसरे कॉलम पर जाना होगा. कॉलम को सिर्फ़ तब लागू करना ज़्यादा सुरक्षित होगा, जब व्यूपोर्ट ज़रूरत के मुताबिक चौड़ा और लंबा हो.

मीडिया क्वेरी को मिलाया जा सकता है, ताकि स्टाइल सिर्फ़ तब लागू हों, जब सभी शर्तें पूरी हों. इस उदाहरण में, कॉलम स्टाइल लागू करने के लिए व्यूपोर्ट कम से कम 50em चौड़ा और 60em लंबा होना चाहिए. ये ब्रेकपॉइंट, कॉन्टेंट की संख्या के आधार पर चुने गए हैं.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

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

आपने जो सीखा है उसकी जांच करें

रिस्पॉन्सिव मीडिया क्वेरी के बारे में अपनी जानकारी की जांच करें.