X

X

X

CSS3 মিডিয়া কুয়েরি


রেসপনসিভ ওয়েব পেজ তৈরি করার জন্য মিডিয়া কুয়েরি ব্যবহার করা হয়।

@media rule প্রপার্টি ব্যবহার করে বিভিন্ন মিডিয়া টাইপের জন্য বিভিন্ন স্টাইল রুল সেট করা যায়।

উদাহরণ: এই প্রপার্টি ব্যবহার করে আপনি computer screen, printer,television-type device ইত্যাদি বিভিন্ন ডিভাইসের জন্য বিভিন্ন স্টাইল সেট করতে পারবেন।
তবে নিরাশার কথা হচ্ছে এদের মধ্যে অনেক ডিভাইসই আজকাল এটি সাপোর্ট করে না, শুধুমাত্র মিডিয়া টাইপ প্রিন্ট ছাড়া।


CSS3 এ মিডিয়া কুয়েরির ব্যবহার

উপরে উল্লেখ্য করা হয়েছে যে, অনেক ডিভাইস মিডিয়া টাইপ ফিচারটি সঠিকভাবে সমর্থন করে না। একারনে সিএসএস৩ তে এটিকে বর্ধিত করা হয়েছে, যেটিতে সব ডিভাইসে এটিকে সমর্থন করানো যায়।
Media query -কে বিভিন্ন প্রপার্টির মাধ্যমে প্রয়োগ করা যায়:

  • ভিউপোর্ট -এর width ও height এর মাধ্যমে
  • ডিভাইসের width ও height এর মাধ্যমে
  • orientation (landscape বা portrait mode?)
  • resolution

বিভিন্ন সাইজের ডিভাইসের জন্য রেসপনসিভ ওয়েব ডিজাইন তৈরি করার ক্ষেত্রে মিডিয়া কুয়েরির ব্যবহার অপরিহার্যভাবে গুরুত্বপূর্ণ।


ব্রাউজার সাপোর্ট

@media rule সমর্থিত ব্রাউজার সমূহের প্রথম ভার্শন নিচে উল্লেখ্য করা হলো:

প্রপার্টি
@media 21.0 9.0 3.5 4.0 9.0

Media Query Syntax

কোনো media query স্টেটমেন্ট একটি media type এবং এক বা একাধিক expression সহ গঠিত হয় যার সমন্বিত মান সর্বদা সত্য বা মিথ্যা হয়।

@media not|only mediatype and (expressions) {
CSS-Code;
}

কুয়েরির ফলাফল সত্য হবে যখন বর্ণিত মিডিয়া টাইপ ডিভাইসের সাথে সামঞ্জস্যপূর্ণ হবে।

বিভিন্ন মিডিয়া টাইপের জন্য বিভিন্ন স্টাইলশিট সেট করা যায়:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 এর Media Type সমূহ

মান বর্ণনা
all সব media type device এর জন্য প্রযোজ্য।
print printer এর জন্য প্রযোজ্য।
screen computer screen, tablet, smart-phone ইত্যাদির জন্য প্রযোজ্য।
speech screenreader যেগুলোতে পেজের কন্টেন্ট পড়ে শোনানো হয় সেগুলোর ক্ষেত্রে প্রযোজ্য।

Media Query এর সাধারণ উদাহরণ

নিচের উদাহরণে দেখানো হয়েছে যখন viewport এর প্রস্থ 480 pixels এর সমান বা বেশি তখন background-color lightgreen এর পরিবর্তিত হয়। যখন 480 pixels এর কম হয় তখন background-color pink :

Code Example

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে দেখানো হয়েছে যখন viewport এর প্রস্থ 480 pixels এর সমান বা বেশি, তখন মেনুটি বাম দিকে সরে যায়।

Code Example

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left: 216px;}
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS3 @media Reference (w3schools.com)

media type ও features/expression এর পূর্ণ রেফারেন্স দেখার জন্য , অনুগ্রহ করে w3schools.com এর CSS reference দেখুন।