सीएसएस अपडेट करने वाली मीडिया क्वेरी

अपने यूज़र इंटरफ़ेस (यूआई) को स्क्रीन की रीफ़्रेश दर की सुविधाओं के हिसाब से अडैप्ट करें.

Adam Argyle

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

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

डिवाइस और रीफ़्रेश रेट

जिन डिवाइसों के लिए डिज़ाइन किया जाता है उनमें ज़्यादातर मामलों में रीफ़्रेश रेट तेज़ होता है. इसमें डेस्कटॉप और ज़्यादातर मोबाइल डिवाइस शामिल हैं.

डिवाइस से क्वेरी की जा सकती है और यह देखा जा सकता है कि कॉन्टेंट को रेंडर करने के लिए, उसमें रीफ़्रेश रेट तेज़ है या नहीं. साथ ही, एक ही स्टाइलशीट डिलीवर करते समय, डिवाइस के हिसाब से स्टाइल तय की जा सकती है.

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

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

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

आखिर में, प्रिंट किए गए पेपर या ई-इंक डिसप्ले जैसी स्थितियां होती हैं, जिनमें सिर्फ़ एक रेंडर पास दिया जा सकता है. इस तरह का आउटपुट कभी रीफ़्रेश नहीं किया जा सकता. इसे none कहा जाता है. इसकी क्वेरी इस तरह की जा सकती है:

@media (update: none) {
  /* one time render like printed paper */
}

नीचे दिए गए CodePen में, अपडेट की गई इस नई मीडिया क्वेरी का इस्तेमाल करके, बेहतर होवर ऐनिमेशन देखें:

ज़्यादा रिसॉर्स

• सीएसएस मीडिया क्वेरी लेवल 4
• MDN पर मीडिया क्वेरी अपडेट करना