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

अपने यूज़र इंटरफ़ेस (यूआई) को स्क्रीन की रीफ़्रेश दर की क्षमताओं के हिसाब से सेट करें.

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