সিএসএস৩ মিডিয়া ক্যোয়ারী - Css3 Media Queries


@media ক্যোয়ারী কি?

মিডিয়া ক্যুয়েরী হলো সিএসএস এর 3.0 সংস্করণে সংযোজিত একটি পদ্ধতি যা ব্যবহার করে কোন ওয়েব পেজকে সহজে রেস্পন্সিভ তৈরি করা যায়। এক্ষেত্রে বিভিন্ন আকারের স্ক্রীন এর জন্য ভিন্ন ভিন্ন সিএসএস স্টাইল কোড নির্ধারণ করা যায়। নির্দিষ্ট কত গুলো শর্ত বা condition, সত্য বা true হলেই মিডিয়া ক্যুয়েরীর অন্তর্গত সিএসএস স্টাইল কোড গুলো কাজ করে বা execute করে।

সিএসএস মিডিয়া ক্যুয়েরী ব্যবহারের জন্য @media প্রোপার্টি ব্যবহার করা হয়। সাধারণত বিভিন্ন ডিভাইসের জন্য এইচটিএমএল এলিমেন্ট গুলোর প্রস্থ বা width নির্ধারণ করা হয় এবং ঐ প্রস্থের সকল ডিভাইসের জন্য নির্দিষ্ট কত গুলো সিএসএস স্টাইল কোড নির্ধারণ করা হয়।

নিচের উদাহরনে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে সিএসএস এর @media প্রোপার্টি ব্যবহার করা হয়েছে। এখানে স্বাভাবিক ভাবে পৃষ্ঠদেশ বা background এর রঙ blue থাকে, কিন্তু যখন ব্রাউজার উইন্ডোটি 600 px বা তার কম হয়, তখন পৃষ্ঠদেশ বা background এর রঙ হবে lightblue.

উদাহরণ

body {
   background-color: blue;
  }
  
@media only screen and (max-width: 600px) {
body {
   background-color: lightblue;
  }
}

কোড এডিটর


CSS2.0 - @media টাইপ

সিএসএস এর 2.0 সংস্করণ বা version এ @media রুল সংযুক্ত করা হয়েছিল। এই রুল ব্যাবহার করে ভিন্ন ভিন্ন ডিভাইস অর্থাৎ স্ক্রীনের আকার যেমন - কম্পিউটার স্ক্রিনের জন্য, প্রিন্টার এর জন্য বা স্মার্টফোন ইত্যাদির জন্য ভিন্ন ভিন্ন স্টাইল কোড ব্যাবহার করা যায়।


CSS3.0 - @media ক্যোয়ারী

সিএসএস এর 3.0 সংস্করণে @media রুলকে আরও সম্প্রসারিত করা হয়েছে, এই মিডিয়া রুলকে বলা হয় মিডিয়া ক্যোয়ারী। @media ক্যোয়ারী ব্যাবহার করে স্ক্রীনের আকার বা size অনুসারে ভিন্ন ভিন্ন সিএসএস স্টাইল কোড ব্যাবহার করা যায়।

এছাড়া সিএসএস 3.0 এর মিডিয়া ক্যুয়েরি ব্যাবহার করে বেশ কিছু কাজ খুব সহজে করা যায়, এগুলো হল নিম্নরূপ।


@media সিনট্যাক্স

দুই বা ততোধিক মিডিয়া টাইপ নিয়ে একটি মিডিয়া ক্যুয়েরি গঠিত হয়। এখানে দুই বা ততোধিক শর্তযুক্ত এক্সপ্রেশন থাকে যেগুলো ওপর নির্ভর করে মিডিয়া ক্যোয়ারী কাজ করে। নিচে মিডিয়া ক্যোয়ারীর সিনট্যাক্স দেখুন।

সিনট্যাক্স

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

নির্দিষ্ট মিডিয়া টাইপ এবং ডিভাইস একই প্রকারের হলেই কেবল ঐ নির্ধারিত সিএসএস স্টাইল কোড গুলো কাজ করে।

ভিন ভিন্ন ডিভাইসের জন্য ভিন্ন ভিন্ন স্টাইল শিটকে <link> ট্যাগ ও মিডিয়া ক্যোয়ারীর মাধ্যমে ব্যাবহার করা যায়, নিচে এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

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

বিভিন্ন মিডিয়া টাইপ

Value Description
allসব প্রকার মিডিয়া টাইপ এর জন্য বাবহ্রিত হয়।
printপ্রিন্টারের জন্য বাবহ্রিত হয়।
screen কম্পিউটার স্ক্রীন, ট্যাবলেট এবং মোবাইল ফোন এর জন্য ব্যাবহৃত হয়।
speech টেক্সটকে শব্দ করে পড়তে বাবহ্রিত হয়।

মিডিয়া ক্যুয়েরির উদাহরণ

মিডিয়া ক্যোয়ারী ব্যবহারের জন্য একটি সহজ পদ্ধতি হল সিএসএস স্টাইল সিটেই মিডিয়া ক্যুয়েরির কোড গুলো রাখা।

নিচে একটি উদাহরণ দেখুন, এখানে যদি ভিউপোর্ট 480px বা এর থেকে বড় হয় তবে পৃষ্ঠদেশ বা background এর রঙ হবে SlateBlue, আর যদি 480px এর কম হয় তবে পৃষ্ঠদেশ বা background এর রঙ হবে OrangeRed.

উদাহরণ

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

কোড এডিটর


নিচে একটি উদাহরণটি দেখুন, এখানে যদি ভিউপোর্ট 480px বা এর থেকে বড় হয় তবে ওয়েব পেজের বা পাসে একটি মেন্যুবার থাকে আর যদি 480px এর কম হয় তবে ওয়েব পেজের ওপরে মেন্যুবার অবস্থান করে।

উদাহরণ

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

কোড এডিটর


সিএসএস 3.0 সংস্করণের @media ক্যুয়েরি সম্পর্কে আরও জানতে আমাদের সিএসএস মিডিয়া কুয়েরি টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।