طلب بحث الوسائط عن تحديث CSS

اضبط واجهة المستخدم بما يتناسب مع إمكانات معدّل إعادة التحميل على الشاشة.

Adam Argyle

تُعدّ طلبات البحث عن الوسائط في 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 التالية، اطلع على رسم متحرك تم تحسينه تدريجيًا باستخدام هذا الاستعلام الجديد عن الوسائط:

مزيد من الموارد

• المستوى 4 من استعلامات الوسائط في CSS
• تعديل الاستعلام عن الوسائط في MDN