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

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

मीडिया क्वेरी @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 at-rules का इस्तेमाल करें.

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

रिस्पॉन्सिव डिज़ाइन के लिए, ब्राउज़र व्यूपोर्ट के डाइमेंशन, मीडिया की सबसे ज़्यादा काम की सुविधाओं में से एक हैं. जब ब्राउज़र विंडो किसी तय चौड़ाई से ज़्यादा चौड़ी हो, तब स्टाइल लागू करने के लिए 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;
  }
}

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

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

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