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

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

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

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

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

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