সিএসএস মিডিয়া কুয়েরি - Css Media-Queries


মিডিয়া ক্যুয়েরী কি?

মিডিয়া ক্যুয়েরী হলো সিএসএস এর 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;
  }
}

কোড এডিটর



ব্রেকপয়েন্ট যোগ করা

পূর্বের টিউটোরিয়ালে সারি এবং কলাম ব্যবহার করে একটি ওয়েব পেজ তৈরি করা হয়েছিল, যা রেস্পন্সিভ ওয়েব পেজ ছিল। কিন্তু ওয়েব পেজটি রেস্পন্সিভ হলেও তা ছোট স্ক্রীনের ডিভাইসে ভালো দেখায়নি।

এক্ষেত্রে সিএসএস এর @media প্রোপার্টি ব্যবহার করা যায়। এখানে একটি ব্রেকপয়েন্ট যোগ করা যায়। যার ফলে ডিজাইনের কিছু অংশ ব্রেকপয়েন্টের বিভিন্ন দিক থেকে বিভিন্ন রকম দেখাবে।

25% width
75% width



768 পিক্সেলে একটি ব্রেকপয়েন্ট যুক্ত করার জন্য নিচে সিএসএস @media প্রোপার্টি ব্যবহার করে একটি উদাহরণ দেখুন। এখানে যখন ব্রাউজার উইন্ডো 768 px এর থেকে ছোট হয়ে যায় তখন, প্রতিটি কলামের প্রস্থ বা width 100% হয়।

উদাহরণ

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}

কোড এডিটর



মোবাইল বা স্মার্টফোনকে প্রাধান্য দিন

কোন ওয়েব পেজকে ডেক্সটপ এর স্ক্রীনের জন্য রেস্পন্সিভ ডিজাইন করার পূর্বে মোবাইল বা স্মার্টফোন ডিভাইসের জন্য ডিজাইন করা উচিৎ, তাহলে ফলে মোবাইলের মত ছোট স্ক্রীনগুলোতে ওয়েব পেজ দ্রুত লোড হয় বা প্রদর্শিত হয়।

নিচে একটি উদাহরণ দেখুন। এখানে স্ক্রীনের সাইজ 768 px থেকে ছোট হলে স্টাইল পরিবর্তন না করে, 768px থেকে বড় হলে তার জন্য স্টাইল পরিবর্তন করেছি। এর ফলে ওয়েব পেজটি মোবাইল ফার্স্ট হয়েছে।

উদাহরণ

/* For mobile phones: */
[class*="col-"] {
   width: 100%;
   }

@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;} 
.col-7 {width: 58.33%;} 
.col-8 {width: 66.66%;} 
.col-9 {width: 75%;} 
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;} 
.col-12 {width: 100%;} 
}

কোড এডিটর



একাধিক ব্রেকপয়েন্ট

প্রয়োজন অনুসারে একাধিক ব্রেকপয়েন্ট তৈরি করা যায়। নিচে একটি উদাহরন দেখুন। এখানে আমরা ট্যাবলেট এবং মোবাইল ফোনের মধ্যে একটি ব্রেকপয়েন্ট তৈরি করেছি।

আমরা এটি করেছি আরও 600px এ একটি মিডিয়া ক্যোয়ারী ব্যবহার করেছি এবং 600px এর থেকে বড় ডিভাইসের জন্য নতুন কত গুলো ক্লাস (768px এর চেয়ে ছোট) যোগ করে। এখানে দেখুন যে class এর দুটি সেট প্রায় একই রকম, একমাত্র পার্থক্য হল নাম (col- এবং col-s-):

উদাহরণ

/* For mobile phones: */
[class*="col-"] {
   width: 100%;
   }
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;} 
.col-s-4 {width: 33.33%;} 
.col-s-5 {width: 41.66%;} 
.col-s-6 {width: 50%;} 
.col-s-7 {width: 58.33%;} 
.col-s-8 {width: 66.66%;} 
.col-s-9 {width: 75%;}
 .col-s-10 {width: 83.33%;} 
 .col-s-11 {width: 91.66%;} 
 .col-s-12 {width: 100%;} 
 } 
 
 @media only screen and (min-width: 768px) {
 /* For desktop: */ 
 .col-1 {width: 8.33%;} 
 .col-2 {width: 16.66%;}
 .col-3 {width: 25%;}
 .col-4 {width: 33.33%;} 
 .col-5 {width: 41.66%;}
 .col-6 {width: 50%;}
 .col-7 {width: 58.33%;} 
 .col-8 {width: 66.66%;} 
 .col-9 {width: 75%;} 
 .col-10 {width: 83.33%;}
 .col-11 {width: 91.66%;}
 .col-12 {width: 100%;}
 }

কোড এডিটর


এখানে দুটি একিই রকম ক্লাস আছে। কিন্তু এর ফলে আমরা html ক্লাসকে সুনির্দিষ্ট ভাবে নির্দেশ করতে পারি অর্থাৎ প্রতিটি ব্রেকপয়েন্টে কলামগুলি কেমন থাকবে তা নির্ধারণ করতে পারি।

উদাহরণ

<div class="row">
   <div class="col-3 col-s-3"> ... </div>
   <div class="col-6 col-s-9"> ... </div>
   <div class="col-3 col-s-12"> ... </div>
</div>

কোড এডিটর


ব্যাখ্যা -

ডেক্সটপ এর জন্য -
ওয়েব পেজের ১ম ও ৩য় ভাগ তৈরি হবে ৩টি করে কলাম নিয়ে এবং ২য় ভাগটি তৈরি হবে ৬টি কলাম নিয়ে আর ১ম, ২য় ও ৩য় ভাগ একই সারিতে থাকবে। ট্যাবলেট এর জন্য -
ওয়েব পেজের ১ম ভাগ 3টি কলাম নিয়ে, ২য় ভাগ 9 টি নিয়ে হবে। এই ২টি ভাগের নিচে থাকবে ৩য় ভাগটি যা ১২টি কলাম নিয়ে তৈরি হবে।


সাধারণ কিছু ব্রেকপয়েন্ট

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

উদাহরণ

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

কোড এডিটর



Orientation: Portrait / Landscape

ওয়েব ব্রাউজারের orientation এর ওপর নির্ভর করে কোনও ওয়েব পেজের লেআউট পরিবর্তন করার জন্য মিডিয়া ক্যুয়েরী ব্যবহার করা যায়। এর জন্য সিএসএস এর orientation প্রোপার্টি ব্যবহার করা যায়।

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

সিএসএস এর orientation প্রোপার্টি ব্যবহার নিচে একটি উদাহরন দেখুন, যেখানে স্বাভাবিক ভাবে ওয়েব পেজের পৃষ্ঠদেশ বা background এ ধূসর বা gray রঙ থাকে, কিন্তু orientation যদি landscape মোডে থাকে তবে ওয়েব পেজের পৃষ্ঠদেশ বা background এ green রঙ থাকবে।

উদাহরণ

body {
   background-color: gray;
   }

@media only screen and (orientation: landscape) {
body {
   background-color: green;
   }
}

কোড এডিটর



কোন এলিমেন্ট লুকানো

মিডিয়া ক্যুয়েরী অর্থাৎ সিএসএস @media প্রোপার্টি ব্যবহার করে বিভিন্ন আকারের স্ক্রীনে কোন এইচটিএমএল কন্টেন্টকে খুব সহজেই লুকিয়ে বা hide করা যায়। নিচে একটি উদাহরণ দেখুন, এখানে স্ক্রীনের সাইজ যদি 700px বা 700px এর কম হয় তবে কন্টেন্টটি অর্থাৎ .example নামের ক্লাস যুক্ত div এলিমেন্টটি প্রদর্শিত হবে না।

উদাহরণ

/* If the screen size is 700px wide or less, hide the div element */
@media only screen and (max-width: 700px) {
div.example {
   display: none;
   }

কোড এডিটর



লেখার আকার পরিবর্তন

মিডিয়া ক্যুয়েরী অর্থাৎ সিএসএস @media প্রোপার্টি ব্যবহার করে বিভিন্ন আকারের স্ক্রীনে লেখার আকার বা size পরিবর্তন করা যায়। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ

* If the screen size is 701px or more, set the font-size of <div> to 60px */
@media only screen and (min-width: 701px) { 
div.example { 
   font-size: 60px; 
   } 
 }
 
/* If the screen size is 700px or less, set the font-size of <div> to 30px */ 
@media only screen and (max-width: 700px) {
div.example { 
   font-size: 30px; 
   }
 }

কোড এডিটর



ছবিকে রেস্পন্সিভ করা

মিডিয়া ক্যুয়েরী অর্থাৎ সিএসএস @media প্রোপার্টি ব্যবহার করে বিভিন্ন আকারের স্ক্রীনে ছবির আকার বা size পরিবর্তন করা যায়। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ



কোড এডিটর