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

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

मीडिया क्वेरी, @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. */
}

इस मीडिया क्वेरी को width मीडिया फ़ीचर और 'इससे कम या इसके बराबर' ऑपरेटर का इस्तेमाल करके भी लिखा जा सकता है.

@media (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. /*
}

इसे रेंज सिंटैक्स का इस्तेमाल करके भी लिखा जा सकता है.

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

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

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

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

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

कॉम्बिनेशन

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

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

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

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

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

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

देखें कि आपको कितना समझ आया

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