تكييف واجهة المستخدم الخاصة بك مع إمكانات معدل تحديث الشاشة.
إنّ طلبات بحث الوسائط في CSS هي أداة فعّالة تتيح لك التحكّم في مظهر موقعك الإلكتروني أو تطبيق الويب استنادًا إلى الجهاز الذي يتم عرضه عليه. باستخدام الاستعلامات عن الوسائط، يمكنك إنشاء تخطيطات مختلفة لأحجام الشاشة والاتجاهات المختلفة وعوامل أخرى.
يتيح لك الاستعلام عن الوسائط 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 التالي، يمكنك مشاهدة صورة متحركة يتم تحريكها تدريجيًا باستخدام هذا الاستعلام الجديد عن الوسائط حول التحديث: