CSS به روز رسانی Media Query

رابط کاربری خود را با قابلیت‌های نرخ تازه‌سازی صفحه تطبیق دهید.

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 زیر، یک انیمیشن شناور پیشرفته با استفاده از این درخواست رسانه به‌روزرسانی جدید را ببینید:

منابع بیشتر

• پرس و جوهای رسانه CSS سطح 4
• به روز رسانی Media Query در MDN