CSS এর হাতেখড়ি (পর্ব

আগের পর্বে আমরা CSS Grid শিখেছি, যেখানে দেখেছিলাম auto-fit ও minmax() দিয়ে মিডিয়া কুয়েরি ছাড়াই কিছুটা responsive layout বানানো যায়। কিন্তু সব ক্ষেত্রে এতটা যথেষ্ট না — মোবাইল, ট্যাবলেট, ডেস্কটপে ভিন্ন ভিন্ন লেআউট, ফন্ট সাইজ, বা এমনকি ভিন্ন কন্টেন্ট দেখানোর জন্য Media Query লাগে। আজকের পর্বে এটাই শিখবো।

Responsive Design কী?

Responsive Design মানে এমনভাবে ওয়েবসাইট বানানো, যাতে সেটা মোবাইল ফোন, ট্যাবলেট, ল্যাপটপ — যেকোনো স্ক্রিন সাইজে সুন্দর ও ব্যবহারযোগ্য দেখায়। একটা ফিক্সড ৯৬০px ওয়াইড লেআউট মোবাইলে ভয়ংকর দেখাবে — লেখা ছোট, বাটন চাপা কঠিন, সাইডে স্ক্রল করতে হবে। Media Query এই সমস্যা সমাধান করে।

Viewport Meta Tag — প্রথম ধাপ

Media Query কাজ করার আগে HTML-এর <head>-এ এই লাইনটা থাকা বাধ্যতামূলক:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

এই লাইন ছাড়া মোবাইল ব্রাউজার পেজটাকে জোর করে ডেস্কটপ সাইজে দেখানোর চেষ্টা করে, তারপর সেটাকে ছোট করে ফিট করায় — ফলে Media Query থাকলেও কোনো কাজ করে না। এটা এতটাই গুরুত্বপূর্ণ যে প্রতিটা HTML পেজে এটা থাকা উচিত, responsive হোক বা না হোক।

Media Query-এর বেসিক সিনট্যাক্স

@media (max-width: 600px) {
  body {
    background-color: lightyellow;
  }
}

এর মানে — যখন স্ক্রিনের width ৬০০px বা তার কম হবে, তখন এই কার্লি ব্র্যাকেটের ভেতরের CSS প্রয়োগ হবে। ৬০০px-এর বেশি স্ক্রিনে এই CSS একদম ইগনোর হয়ে যাবে।

Mobile-First Approach

দুইভাবে Media Query লেখা যায়:

Approach	পদ্ধতি
Desktop-first	আগে ডেস্কটপের CSS লেখো, তারপর `max-width` দিয়ে ছোট স্ক্রিনের জন্য override করো
Mobile-first	আগে মোবাইলের CSS লেখো, তারপর `min-width` দিয়ে বড় স্ক্রিনের জন্য উন্নত করো

আধুনিক ওয়েব ডেভেলপমেন্টে Mobile-first approach বেশি জনপ্রিয়, কারণ বেশিরভাগ ওয়েবসাইটের ভিজিটর এখন মোবাইল থেকেই আসে:

/* ডিফল্ট — মোবাইলের জন্য (কোনো media query ছাড়াই) */
.container {
  display: block;
}

/* ট্যাবলেট ও তার বড় স্ক্রিনের জন্য */
@media (min-width: 768px) {
  .container {
    display: flex;
  }
}

/* ডেস্কটপ ও তার বড় স্ক্রিনের জন্য */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

টিপস: Mobile-first-এ CSS "উপরে" স্তরে স্তরে যোগ হয় — প্রথমে সবচেয়ে সহজ/ছোট স্ক্রিনের ডিজাইন, তারপর বড় স্ক্রিনে ধীরে ধীরে বাড়তি ফিচার/লেআউট যোগ হয়। এতে কোড অনেক পরিষ্কার থাকে।

কমন Breakpoint

Breakpoint মানে যে স্ক্রিন সাইজে লেআউট পরিবর্তন হবে। কোনো "সঠিক" নিয়ম নেই, তবে এই মানগুলো ইন্ডাস্ট্রিতে খুবই জনপ্রিয়:

ডিভাইস	সাধারণ Breakpoint
মোবাইল	৬০০px পর্যন্ত (ডিফল্ট, কোনো query লাগে না)
ট্যাবলেট	`min-width: 768px`
ডেস্কটপ	`min-width: 1024px`
বড় ডেস্কটপ	`min-width: 1280px`

প্র্যাকটিক্যাল উদাহরণ — Navbar মোবাইলে বদলানো

আগের পর্বে যে navbar আমরা Flexbox দিয়ে বানিয়েছিলাম, সেটা মোবাইলে vertical মেনুতে পরিবর্তন করা যাক:

.navbar {
  display: flex;
  flex-direction: column; /* ডিফল্ট — মোবাইলে উপর-নিচ */
}

@media (min-width: 768px) {
  .navbar {
    flex-direction: row; /* ট্যাবলেট থেকে পাশাপাশি */
    justify-content: space-between;
  }
}

Responsive Font Size

Heading-এর সাইজও স্ক্রিন অনুযায়ী বদলানো ভালো অভ্যাস — বড় স্ক্রিনে বড় heading সুন্দর লাগে, কিন্তু মোবাইলে একই সাইজ জায়গা বেশি নিয়ে ফেলে:

h1 {
  font-size: 28px;
}

@media (min-width: 1024px) {
  h1 {
    font-size: 42px;
  }
}

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive উদাহরণ</title>
  <style>
    .navbar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 15px;
      background: #2c3e50;
    }

    .navbar a {
      color: white;
    }

    .card-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 20px;
    }

    h1 {
      font-size: 24px;
    }

    @media (min-width: 768px) {
      .navbar {
        flex-direction: row;
        justify-content: space-between;
      }

      .card-list {
        grid-template-columns: repeat(3, 1fr);
      }

      h1 {
        font-size: 36px;
      }
    }
  </style>
</head>
<body>
  <div class="navbar">
    <a href="#">লোগো</a>
    <a href="#">মেনু</a>
  </div>

  <h1>আমার ব্লগ</h1>

  <div class="card-list">
    <div>কার্ড ১</div>
    <div>কার্ড ২</div>
    <div>কার্ড ৩</div>
  </div>
</body>
</html>

এই কোড মোবাইলে navbar-কে vertical ও কার্ডগুলোকে ১ কলামে দেখাবে; ৭৬৮px-এর বেশি স্ক্রিনে navbar horizontal হয়ে যাবে আর কার্ড ৩ কলামে সাজবে।

নিজে চেষ্টা করো

Exercise:

একটা HTML পেজে viewport meta tag আছে কিনা চেক করো, না থাকলে যোগ করো
একটা navbar বানাও যেটা মোবাইলে vertical, ট্যাবলেট থেকে horizontal
একটা h1-এর font-size মোবাইল ও ডেস্কটপে আলাদা রাখো
ব্রাউজারের developer tools দিয়ে (F12 চেপে responsive mode-এ গিয়ে) নিজের বানানো পেজটা বিভিন্ন স্ক্রিন সাইজে টেস্ট করো

পরের পর্বে যা থাকছে

পর্ব ১০-এ আমরা শিখবো Pseudo-class ও Pseudo-element (:hover, :nth-child, ::before, ::after), সাথে Transition ও Animation বেসিক, উদাহরণসহ।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ

CSS এর হাতেখড়ি (পর্ব – ৯)