Media Queries: Min-Width and Max-Width

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

Media Query Syntax

@media media type and (condition: breakpoint) {
  // CSS rules
}

Syntax গুলোর মিনিং জেনে নেই

১) @media- একটি set of rules যা নির্দিষ্ট conditions এর উপর ভিত্তি করে কন্টেন্টগুলো ডিভাইস অনুযায়ী কেমন হবে তা নির্দেশ করে।

২) media-type - ডিভাইস category কে বঝাই। Media type এ আছে :

a) all - সব ডিভাইস এর জন্য কাজ করবে
b) print - এমন ডিভাইসের জন্য কাজ করে যেখানে মিডিয়াটা প্রিন্ট প্রিভিউ
মোডে থাকবে
c) screen - যেকোনো ডিভাইস স্ক্রিন এর জন্য কাজ করবে
d) speech - স্ক্রিন রিডারের মতো ডিভাইসের জন্য কাজ করে যে ডিভাইস
ইউজার text-to-speech এর জন্য ব্যবহার করে।

৩) and - এটি লজিকাল অপেরেটার যেটা ব্যাবহার হয় যখন একের অধিক conditions লিখা হয়।

৪) conditions - conditions গুলো সাধারণত max-width এবং min-width নিয়ে হয়।

এই ব্লগটিতে আমরা max-width এবং min-width কিভাবে কাজ করে সেটা জানব এবং কিছু কোড এর উদাহরণ দেখবো। তার আগে ব্রেকপয়েন্টটা কি সেটা জেনে নি।

Breakpoint

ব্রেকপয়েন্ট সম্ভবত সবচেয়ে সাধারণ শব্দ যা আপনি শুনেছেন এবং ব্যবহার করবেন। একটি ব্রেকপয়েন্ট নির্ধারণ করে কতটুকু পর্যন্ত একটা ডিভাইস নির্দিষ্ট লেআউট টা রাখবে এবং কখন লেআউট পরিবর্তন করতে। ব্রেকপয়েন্ট এর উপর ভিক্তি করে মিডিয়া কোয়েরির ভিতরে যে CSS rules গুলো লিখা আছে সেগুলো apply করে।

@media screen and (max-width: 768px) {
  .text {
    font-size: 32px;
  }
}

এখানে, ব্রেকপয়েন্ট হল 768px। এখন মিডিয়া ক্যোয়ারী জানে কখন নতুন ক্লাস সেট বা ওভাররাইট করতে হবে। যদি একটি ডিভাইসের সাইজ 786px বা কম হয় তাহলে text এর font-size: 32px হবে। ডিভাইসের সাইজ 786px এর বেশি হলে style টি apply হবে না।

Max-width

উপরের উদাহরণ যদি বুঝে থাকেন তাহলে max-width কি সেটার সম্বন্ধে কিছুটা idea করে ফেলতে পেরেছেন। যখন শুধু max-width condition টি ব্যবহার করা হয়, তখন media query 0px থেকে max-width এর যে specific মান/ব্রেকপয়েন্ট দেওয়া আছে ঠিক সে পর্যন্ত যে style গুলো লিখা হয়েছে সেগুলো apply করবে।

@media screen and (max-width: 480px) {
  .container {
    background-color: blue;
  }
}

সংক্ষেপে যদি বলি, এখানে max-width মানে device এর width 480px বা কম হবে।

Min-width

Min-width ঠিক opposite ভাবে কাজ করে। যখন min-width condition টি ব্যবহার করা হয় তখন min-width এর specific মান/ব্রেকপয়েন্ট থেকে আপনার ডিভাইস এর maximum সাইজ পর্যন্ত media query তে লিখা style গুলো apply হবে।

@media screen and (min-width: 768px) {
  .container {
    background-color: red;
  }
}

সংক্ষেপে যদি বলি, এখানে min-width মানে device এর width 768px বা বেশি হবে।

Min-width and Max-Width

আমরা চাইলে min-width এবং max-width এক সাথে ব্যবহার করতে পারি। যখন ২টা বা দুয়ের অধিক conditions লিখব তখন অবশ্যই আমরা and অপেরেটারটি ব্যবহার করব।

@media only screen and (min-width: 360px) and (max-width: 768px) {
  .container {
    background-color: green;
  }
}

এখন একটা প্রশ্ন আপনাদের কাছে আসতে পারে কখন only ব্যাবহার করব এবং কখন করব না?

only ব্যবহার করতে পারেন না ও করতে পারেন। আমি ব্লগ ২ টাই দেখালাম। ব্যাবহার করলে আপনি যে output পাবেন না করলেও সেম পাবেন কিন্তু শুধু নতুন ব্রাউজার এর ক্ষেত্রে। পুরনো ব্রাউজার এর সময় only ব্যাবহার করলে ভালো হয়।

কেন পুরনো ব্রাউজার এব্যাবহার করা উচিত?

মনে করেন আপনি একটা style apply করলেন যেটা শুধু একটা specific condition/breakpoint এর উপর ভিক্তি করে apply হবে এখন এই ওয়েবসাইটা যদি একটা পুরনো ব্রাউজার এ রান করি সেই condition/breakpoint এর under যে media query সব স্টাইল গুলো লিখা হয়েছে সেটা পুরনো ব্রাউজার সব conditon এর জন্য apply করে দিবে কারণ পুরনো ব্রাউজার px ্ঠিক ভাবে count করতে পারেনা only না দিলে। পুরনো ব্রাউজার যেহেতু উঠে যাচ্ছে তাই এই syntax টা কম use করা হয়।

কিছু অল্প কোড এর উদাহরণ দিয়ে min-width এবং max-width কিভাবে কাজ সেটা বুঝানো হয়েছে। min-width এবং max-width এর কাজ যদি clearly বুঝে থাকেন তাহলে আপনি খুব সহজে media query ব্যবহার করে আপনার সাইটটি কে responsive design দিতে পারবেন। Practise করতে থাকুন। Because practice helps you understand a concept better.

Best of luck on your CSS journey!