CSS আপডেট মিডিয়া কোয়েরি

স্ক্রিনের রিফ্রেশ রেট ক্ষমতার সাথে আপনার UI মানিয়ে নিন।

অ্যাডাম আর্গিল
Adam Argyle
X GitHub

CSS মিডিয়া ক্যোয়ারী হল একটি শক্তিশালী টুল যা আপনাকে আপনার ওয়েবসাইট বা ওয়েব অ্যাপ যে ডিভাইসে দেখা হচ্ছে তার উপর ভিত্তি করে এর চেহারা নিয়ন্ত্রণ করতে দেয়। মিডিয়া প্রশ্নের সাথে, আপনি বিভিন্ন স্ক্রীনের আকার, অভিযোজন এবং অন্যান্য বিষয়গুলির জন্য বিভিন্ন লেআউট তৈরি করতে পারেন।

update মিডিয়া ক্যোয়ারী আপনাকে একটি ডিভাইসের রিফ্রেশ হারের সাথে UI মানিয়ে নেওয়ার একটি উপায় দেয়৷ বৈশিষ্ট্যটি fast , slow , বা none মান রিপোর্ট করতে পারে যা বিভিন্ন ডিভাইসের ক্ষমতার সাথে সম্পর্কিত।

ব্রাউজার সমর্থন

  • ক্রোম: 113।
  • প্রান্ত: 113।
  • ফায়ারফক্স: 102।
  • সাফারি: 17।

উৎস

ডিভাইস এবং রিফ্রেশ হার

আপনি যে ডিভাইসগুলির জন্য ডিজাইন করেছেন তার বেশিরভাগেরই দ্রুত রিফ্রেশ রেট থাকতে পারে। এর মধ্যে ডেস্কটপ এবং বেশিরভাগ মোবাইল ডিভাইস রয়েছে।

আপনি ডিভাইসটি জিজ্ঞাসা করতে পারেন, এটিতে সামগ্রী রেন্ডার করার জন্য দ্রুত রিফ্রেশ রেট আছে কিনা এবং একটি একক স্টাইলশীট সরবরাহ করার সময় সেই অনুযায়ী স্টাইল করতে পারেন।

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

eReaders, এবং ডিভাইস যেমন কম চালিত পেমেন্ট সিস্টেম, একটি ধীর রিফ্রেশ হার থাকতে পারে. জেনে রাখা যে ডিভাইসটি অ্যানিমেশন বা ঘন ঘন আপডেটগুলি পরিচালনা করতে পারে না, মানে আপনি ব্যাটারি ব্যবহার বা ত্রুটিপূর্ণ ভিউ আপডেটগুলি সংরক্ষণ করতে পারেন৷

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

সবশেষে, মুদ্রিত কাগজ বা ই-কালি প্রদর্শনের মতো পরিস্থিতি রয়েছে যা শুধুমাত্র একটি একক রেন্ডার পাস অফার করতে পারে। এই ধরনের আউটপুট মোটেই রিফ্রেশ করতে পারে না এবং none হিসাবে উল্লেখ করা হয় না। এটি এই মত জিজ্ঞাসা করা যেতে পারে:

@media (update: none) {
  /* one time render like printed paper */
}

নিম্নলিখিত কোডপেনে, এই নতুন আপডেট মিডিয়া ক্যোয়ারী ব্যবহার করে একটি ক্রমবর্ধমান বর্ধিত হোভার অ্যানিমেশন দেখুন:

আরও সম্পদ