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

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

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
• एमडीएन पर मीडिया क्वेरी अपडेट करना