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

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

मीडिया क्वेरी, @media कीवर्ड (सीएसएस at-rule) से शुरू की जाती हैं. इनका इस्तेमाल, अलग-अलग कामों के लिए किया जा सकता है.

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

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

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

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

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

अपनी स्टाइलशीट में @media at-rule का इस्तेमाल इस तरह किया जा सकता है, या कोई अलग स्टाइलशीट बनाई जा सकती है और 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;
  }
}

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

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

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