मीडिया से जुड़ी सुविधाएं

मीडिया की सुविधाओं की मदद से, डिवाइसों और प्राथमिकताओं के हिसाब से जवाब देने के सभी तरीकों के बारे में जानकारी.

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

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

याद रखें कि मीडिया क्वेरी में, मीडिया टाइप (ज़रूरी नहीं) और मीडिया की ज़रूरी सुविधा शामिल होती है. पिछले कुछ सालों में, मीडिया टाइप में काफ़ी बदलाव नहीं हुआ है. हालांकि, अब भी सिर्फ़ चार वैल्यू ही इस्तेमाल की जा सकती हैं:

@media all
@media screen
@media print
@media speech

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

Browser Support

• 1
• 12
• 1
• 3

Source

व्यूपोर्ट डाइमेंशन

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

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

मुझे min-width का इस्तेमाल करना पसंद है. मैं लेआउट स्टाइल को जोड़ने के तरीके से लागू करता/करती हूं. मैं पिछले नियमों को हटाने के बजाय, हर ब्रेकपॉइंट पर नए लेआउट नियम लागू करता/करती हूं.

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

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

हालांकि, अगर आप चाहें, तो max-height मीडिया की सुविधा का इस्तेमाल किया जा सकता है. यहां हेडर, डिफ़ॉल्ट रूप से ऐंकर होता है. हालांकि, अगर वर्टिकल तौर पर ज़रूरत के मुताबिक जगह नहीं है, तो हेडर को ऐंकर नहीं किया जाता.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

min- और max- प्रीफ़िक्स में से किसी एक को चुनने का विकल्प, सिर्फ़ width और height पर लागू नहीं होता. aspect-ratio मीडिया की सुविधा भी यही विकल्प देती है. अगर आपको चौड़ाई-ऊंचाई के सटीक अनुपात में स्टाइल लागू करने हैं, तो यह बिना प्रीफ़िक्स वाला वर्शन भी उपलब्ध कराता है.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

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

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

"पोर्ट्रेट" और "लैंडस्केप" शब्दों का इस्तेमाल, मोबाइल डिवाइसों के ओरिएंटेशन के बारे में बताने के लिए अक्सर किया जाता है. हालांकि, orientation मीडिया की सुविधा, डिवाइस के हिसाब से नहीं होती. किसी सामान्य लैपटॉप पर फ़ुल-स्क्रीन ब्राउज़र विंडो की orientation वैल्यू landscape होगी.

डिसप्ले

अलग-अलग डिसप्ले की पिक्सल डेंसिटी अलग-अलग होती है. इसे dpi, हर इंच में डॉट में मेज़र किया जाता है. resolution मीडिया की सुविधा का इस्तेमाल करके, अलग-अलग पिक्सल डेंसिटी के लिए स्टाइल में बदलाव किया जा सकता है. aspect-ratio की तरह, resolution भी तीन तरह का होता है: कम से कम, ज़्यादा से ज़्यादा, और सटीक.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

ऐसा हो सकता है कि आपको कभी भी resolution मीडिया क्वेरी का इस्तेमाल न करना पड़े. आम तौर पर, पिक्सल की सघनता सिर्फ़ इमेज के लिए एक समस्या होती है. रिस्पॉन्सिव इमेज, एचटीएमएल में पिक्सल की सघनता से जुड़ी समस्या को हल करने का एक तरीका है.

दूसरी ओर, सीएसएस में ऐनिमेशन और ट्रांज़िशन तय किए जाते हैं. update मीडिया की सुविधा का इस्तेमाल करके, अलग-अलग रीफ़्रेश रेट के हिसाब से उन ऐनिमेशन और ट्रांज़िशन में बदलाव किया जा सकता है. यह मीडिया सुविधा, इन तीन वैल्यू में से किसी एक की रिपोर्ट करती है: none, slow, और fast.

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

update की वैल्यू slow होने का मतलब है कि डिसप्ले तुरंत रीफ़्रेश नहीं हो सकता. धीमी रीफ़्रेश दर वाली स्क्रीन का एक उदाहरण, ई-इंक डिसप्ले है.

update की वैल्यू fast होने का मतलब है कि डिसप्ले, ऐनिमेशन और ट्रांज़िशन को हैंडल करने के लिए तेज़ी से रीफ़्रेश होता है.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

डिसप्ले के सभी पहलू, हार्डवेयर की क्षमताओं से जुड़े नहीं होते. थीमिंग के मॉड्यूल में, आपने वेब ऐप्लिकेशन मेनिफ़ेस्ट फ़ाइल में प्रॉपर्टी तय करने का तरीका देखा. इनमें से एक प्रॉपर्टी को display कहा जाता है. इसे fullscreen, standalone, minimum-ui या browser की वैल्यू दी जा सकती है. इन विकल्पों के लिए, display-mode मीडिया की सुविधा की मदद से, अपनी स्टाइल को पसंद के मुताबिक बनाया जा सकता है.

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

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

रंग

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

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

उससे जुड़ी color मीडिया सुविधा मौजूद हो.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

कलर स्क्रीन के लिए, मीडिया की सुविधाओं color-gamut, color-index या dynamic-range के साथ क्वेरी लिखी जा सकती हैं. ये सभी, स्क्रीन की कलर क्षमताओं के बारे में खास जानकारी देते हैं.

इस उदाहरण में, कलर वैल्यू dynamic-range मीडिया सुविधा के जवाब में अपडेट होती हैं. यह सुविधा, डिसप्ले की ज़्यादा से ज़्यादा रोशनी, कलर की गहराई, और कंट्रास्ट रेशियो के कॉम्बिनेशन की रिपोर्ट करती है. संभावित वैल्यू standard या high हैं. high की dynamic-range वैल्यू दिखाने वाली हाई-डेफ़िनिशन स्क्रीन को, सीएसएस के नए color() फ़ंक्शन का इस्तेमाल करके अलग कलर स्पेस दिया जाता है.

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

बातचीत

मीडिया की सुविधाओं से यह भी पता चल सकता है कि आपकी साइट के साथ इंटरैक्ट करने के लिए, किस तरह के इनपुट मैकेनिज्म का इस्तेमाल किया गया है: hover, any-hover, pointer, और any-pointer. ज़्यादा जानकारी के लिए, इंटरैक्शन से जुड़ा मॉड्यूल देखें.

प्राथमिकताएं

उपयोगकर्ता की प्राथमिकताओं के हिसाब से जवाब देने के लिए, कई तरह की मीडिया क्वेरी उपलब्ध हैं: prefers-color-scheme, prefers-contrast, और prefers-reduced-motion. ज़्यादा जानकारी के लिए, थीम और सुलभता से जुड़े मॉड्यूल देखें.

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

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

मीडिया से जुड़ी अन्य सुविधाएं

मीडिया से जुड़ी और भी सुविधाएं जल्द ही उपलब्ध होंगी.

forced-colors और inverted-colors मीडिया की सुविधाओं से यह पता चलेगा कि कोई डिवाइस, पाबंदी वाले या उलटे रंगों के पैलेट का इस्तेमाल कर रहा है या नहीं.

scripting मीडिया फ़ीचर की मदद से, JavaScript की उपलब्धता के आधार पर अपनी सीएसएस में बदलाव किया जा सकता है.

prefers-reduced-data नाम की मीडिया सुविधा की मदद से, उपयोगकर्ता यह बता पाएंगे कि वे मीटर वाले कनेक्शन का इस्तेमाल कर रहे हैं. इससे, आपके पास छोटी या कम एसेट भेजने का विकल्प होगा.

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

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

मीडिया की सुविधाओं के बारे में अपनी जानकारी की जांच करना

क्या मीडिया क्वेरी, @media (width: 1024px) जैसी किसी खास चौड़ाई वाले डिवाइस की जांच कर सकती है?

सही

किसी खास चौड़ाई को सिर्फ़ तब हासिल किया जा सकता है, जब 1023px से ज़्यादा और 1025px से कम चौड़ाई की जांच एक साथ की जाए.

गलत

min-width और max-width उपलब्ध हैं.

क्या मीडिया क्वेरी, @media (aspect-ratio: 4/3) जैसे किसी खास aspect-ratio पर डिवाइस की जांच कर सकती है?

सही

आसपेक्ट रेशियो के हिसाब से, एक रेशियो को मैच किया जा सकता है.

गलत

यह विकल्प aspect-ratio के लिए उपलब्ध है.

रंग से जुड़ी कौनसी मीडिया क्वेरी मान्य हैं?

@media (color)

यह किसी भी रंग के डिवाइस से मैच करता है.

@media (monochrome)

रंग दिखाने की सुविधा के बिना किसी भी डिवाइस से मेल खाता है.

@media (color-gamut: srgb)

sRGB कलर कैपेसिटी वाले डिवाइसों से मैच करता है.

@media (min-color-index: 15000)

यह उन डिवाइसों से मेल खाता है जिनमें कम से कम 15 हज़ार रंग उपलब्ध हैं.

@media (dynamic-range: high)

एचडी कलर रेंज वाले डिवाइसों से मैच करता है.

उपयोगकर्ता की प्राथमिकता से जुड़ी इनमें से कौनसी मीडिया क्वेरी मान्य हैं?

@media (prefers-color-scheme: dark)

तब मैच होता है, जब उपयोगकर्ता ने अपने ऑपरेटिंग सिस्टम को गहरे रंग वाले मोड पर सेट किया हो.

@media (prefers-colors: high-definition)

असली नहीं है.

@media (prefers-reduced-motion: reduce)

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

@media (prefers-contrast: more)

जब उपयोगकर्ता ने अपने ऑपरेटिंग सिस्टम को ज़्यादा कंट्रास्ट पर सेट किया हो, तब मैच होता है.

@media (prefers-site-speed: fast)

असली नहीं है.