अपने यूज़र इंटरफ़ेस को स्क्रीन की रीफ़्रेश दर के हिसाब से सेट करें.
सीएसएस मीडिया क्वेरी एक बेहतरीन टूल है. इसकी मदद से, यह तय किया जा सकता है कि उसे किस डिवाइस पर देखा जा रहा है, आपकी वेबसाइट या वेब ऐप्लिकेशन कैसे दिखे. मीडिया क्वेरी से अलग-अलग स्क्रीन साइज़, स्क्रीन की दिशा, और दूसरी चीज़ों के लिए अलग-अलग लेआउट बनाए जा सकते हैं.
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 में, इस नई अपडेट मीडिया क्वेरी का इस्तेमाल करते हुए बेहतर बनाया गया होवर ऐनिमेशन देखें: