CSS Media Query কী? Responsive Web Design-এর জন্য সম্পূর্ণ বাংলা গাইড

বর্তমান সময়ে একটি ওয়েবসাইট শুধু সুন্দর হলেই যথেষ্ট নয়। ওয়েবসাইটকে এমনভাবে তৈরি করতে হয় যাতে এটি মোবাইল ফোন, ট্যাবলেট, ল্যাপটপ, ডেস্কটপ, বড় মনিটর, এমনকি প্রিন্ট করার সময়ও সুন্দরভাবে দেখা যায়। একজন ব্যবহারকারী যদি মোবাইলে আপনার ওয়েবসাইট খুলে zoom করতে বাধ্য হয়, অথবা desktop এ গিয়ে layout ভেঙে যায়, তাহলে user experience নষ্ট হয়ে যায়।

এই সমস্যার সমাধানের জন্য CSS-এর সবচেয়ে শক্তিশালী ফিচারগুলোর একটি হলো Media Query। Media Query ব্যবহার করে আপনি screen size, device type, orientation, resolution, print mode ইত্যাদির উপর ভিত্তি করে আলাদা CSS apply করতে পারেন।

সহজ ভাষায় বলতে গেলে, Media Query হলো এমন একটি নিয়ম যা browser কে বলে দেয়—”যদি screen এর condition এমন হয়, তাহলে এই CSS চালাও।”

Media Query কী?

Media Query হলো CSS3-এর একটি feature যার মাধ্যমে বিভিন্ন screen condition অনুযায়ী style পরিবর্তন করা যায়। Responsive web design-এর মূল ভিত্তি এটি।

উদাহরণ:

@media (max-width: 768px) {
  body {
    background: #f5f5f5;
  }
}

এখানে screen width যদি 768px বা তার কম হয়, তাহলে background color পরিবর্তন হবে। অর্থাৎ এটি mobile এবং small tablet device-এর জন্য কাজ করবে।

কেন Media Query এত গুরুত্বপূর্ণ?

আগে ওয়েবসাইটগুলো শুধু desktop এর জন্য তৈরি করা হতো। কিন্তু এখন user-এর বড় অংশ মোবাইল ব্যবহার করে। তাই একই website সব screen এ perfectly দেখাতে হলে Media Query ব্যবহার করা জরুরি।

• মোবাইলের জন্য font size ছোট বা readable করা যায়
• Desktop এ বড় layout দেওয়া যায়
• Image resize করা যায়
• Navigation menu mobile friendly করা যায়
• Sidebar hide/show করা যায়
• Print করার সময় clean version তৈরি করা যায়
• Landscape mode এ row layout দেওয়া যায়
• Portrait mode এ stacked layout করা যায়

Media Query Syntax

@media media-type and (condition) {
  selector {
    property:value;
  }
}

উদাহরণ:

@media screen and (max-width: 600px) {
  p {
    font-size: 14px;
  }
}

মানে screen device এ width 600px বা কম হলে paragraph এর font-size 14px হবে।

Media Types

@media screen

শুধুমাত্র screen device-এর জন্য ব্যবহার করা হয়। যেমন monitor, mobile phone, tablet, smart tv ইত্যাদি।

@media screen {
  body {
    font-size: 16px;
  }
}

এটি সবচেয়ে বেশি ব্যবহৃত media type।

@media print

যখন user page print করবে অথবা print preview open করবে তখন এই CSS কাজ করবে।

@media print {
  body {
    font-size: 12pt;
    color: black;
  }
}

Print mode-এ সাধারণত নিচের কাজ করা হয়:

• Background image remove করা
• Navigation hide করা
• Footer remove করা
• Font readable করা
• Invoice / CV clean করা

@media all

সব media type-এর জন্য কাজ করবে। screen, print সব জায়গায়।

@media all {
  body {
    font-family: Arial, sans-serif;
  }
}

Responsive Breakpoints কী?

Breakpoint হলো সেই screen width যেখানে layout change হয়। যখন screen ছোট বা বড় হয়, তখন design adjust করার জন্য breakpoint ব্যবহার করা হয়।

Common breakpoints:

• 0px – 575px = Small Mobile
• 576px – 767px = Mobile
• 768px – 991px = Tablet
• 992px – 1199px = Laptop
• 1200px+ = Desktop

min-width কী?

যখন আপনি min-width ব্যবহার করেন, তখন নির্দিষ্ট width থেকে বড় screen-এ CSS apply হয়।

@media (min-width: 500px) {
  h1 {
    color: red;
  }
}

এটি কাজ করবে:

• 500px
• 600px
• 768px
• 1024px
• 1920px

কাজ করবে না:

• 499px
• 400px

অর্থাৎ 500px থেকে শুরু, তার ওপরে সব screen এ।

max-width কী?

যখন max-width ব্যবহার করেন, তখন নির্দিষ্ট width পর্যন্ত CSS কাজ করবে।

@media (max-width: 500px) {
  h1 {
    color: blue;
  }
}

এটি কাজ করবে:

• 500px
• 450px
• 320px

কাজ করবে না:

• 501px
• 700px
• 1024px

অর্থাৎ 0 থেকে 500px পর্যন্ত।

min-width vs max-width

Feature	Meaning	Best Use
min-width	এই width থেকে ওপরে	Desktop / Tablet
max-width	এই width পর্যন্ত	Mobile

Mobile First Design কী?

বর্তমানে best practice হলো আগে mobile design করা, পরে বড় screen-এর জন্য enhance করা। এটিকে Mobile First Approach বলা হয়।

body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

মানে default mobile style, পরে tablet/desktop এ বড় font।

orientation: landscape

যখন device-এর width height-এর চেয়ে বেশি হয়, তখন landscape mode।

@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

যেমন:

• মোবাইল rotate করলে
• Tablet horizontal ধরলে
• Desktop monitor

orientation: portrait

যখন height width-এর চেয়ে বেশি হয়, তখন portrait mode।

@media (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

যেমন:

• মোবাইল normal mode
• Tablet vertical mode

Multiple Conditions একসাথে

একাধিক condition ব্যবহার করা যায়।

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    background: #eee;
  }
}

এটি শুধুমাত্র tablet screen-এর জন্য কাজ করবে।

Responsive Navigation Example

.menu {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}

Desktop এ menu row থাকবে, mobile এ column হবে।

Responsive Grid Example

.grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Desktop এ 4 column, tablet এ 2 column, mobile এ 1 column।

Beginner Mistakes

1. px না দেওয়া

@media (max-width:500)

ভুল। সঠিক হবে:

@media (max-width:500px)

2. Too Many Breakpoints

প্রয়োজন ছাড়া অনেক breakpoint দিলে CSS complex হয়ে যায়।

3. Desktop First চিন্তা

বর্তমানে mobile user বেশি, তাই mobile first better।

4. Test না করা

Chrome DevTools দিয়ে সব screen size test করা উচিত।

Professional Tips

• Use relative units যেমন rem, em
• Container max-width ব্যবহার করুন
• Image এ max-width:100% দিন
• Flexbox/Grid ব্যবহার করুন
• Breakpoints content অনুযায়ী দিন
• Real device test করুন

Full Example

body {
  font-size: 14px;
}

.container {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  body {
    font-size: 13px;
  }

  .container {
    flex-direction: column;
  }
}

@media (min-width: 769px) {
  body {
    font-size: 16px;
  }

  .container {
    flex-direction: row;
  }
}

@media print {
  body {
    font-size: 11pt;
  }
}

উপসংহার

Media Query হলো modern responsive web design-এর প্রাণ। আপনি যদি professional web designer বা front-end developer হতে চান, তাহলে Media Query ভালোভাবে জানা বাধ্যতামূলক।

এটি দিয়ে আপনি mobile, tablet, desktop, print mode, landscape, portrait—সবকিছু control করতে পারবেন।

একটি responsive website শুধু সুন্দর নয়, এটি SEO friendly, user friendly এবং conversion friendly-ও হয়।

Short Summary

• max-width = ছোট screen পর্যন্ত
• min-width = বড় screen থেকে শুরু
• screen = monitor/mobile
• print = printing mode
• orientation = portrait / landscape
• Media Query = Responsive design-এর মূল শক্তি