29/10/2026

Responsive Web Design — Complete Guide

In this guide, you will learn how to create responsive layouts using mobile-first design, flexible widths, responsive images, clamp(), Flexbox, and CSS Grid.

Responsive Web Design

Responsive Web Design (RWD) is an approach to web design that makes websites look good and work properly on different screen sizes, including mobile phones, tablets, laptops, and desktop computers.

What you will learn:

  1. What Is Responsive Web Design?
  2. Mobile-First Approach
  3. Desktop-First vs. Mobile-First
  4. Flexible Layouts and Fluid Width
  5. max-width and min-width
  6. Responsive Images
  7. clamp() and Flexible Typography
  8. Responsive Layouts Using Flexbox and Grid
  9. Building a Responsive Landing Page

1. What Is Responsive Web Design?

Responsive Web Design is a technique that allows a website to adapt to different screen sizes and devices.

একটি website desktop-এ সুন্দর দেখালেও mobile screen-এ যদি content কেটে যায়, horizontal scrolling করতে হয় অথবা layout ভেঙে যায়, তাহলে সেটি ভালো responsive design নয়।

Responsive design-এর মূল লক্ষ্য হলো প্রতিটি screen size-এ website-কে ব্যবহারযোগ্য ও সহজে পড়ার উপযোগী রাখা।

Example


      .container {
        width: 90%;
        max-width: 1200px;
        margin-inline: auto;
      }

এখানে width: 90% ছোট-বড় screen অনুযায়ী container-এর width পরিবর্তন করে। max-width: 1200px container-কে অতিরিক্ত বড় হতে বাধা দেয়।

2. Mobile-First Approach

Mobile-first approach হলো প্রথমে mobile screen-এর জন্য design তৈরি করা, তারপর বড় screen-এর জন্য layout উন্নত করা।

বর্তমানে অনেক ব্যবহারকারী mobile device দিয়ে website browse করেন। তাই mobile screen-এ content সহজে পড়া ও ব্যবহার করা যায়, সেটি নিশ্চিত করা গুরুত্বপূর্ণ।

Example


    /* Mobile-first */
    .container {
        width: 100%;
        padding: 16px;
    }

    /* Tablet and larger screens */
    @media (min-width: 768px) {
        .container {
            width: 90%;
            margin-inline: auto;
        }
    }

    /* Desktop screens */
    @media (min-width: 1024px) {
        .container {
            max-width: 1200px;
        }
    }

    ব্যাখ্যা:

  • Mobile screen-এ container পুরো width ব্যবহার করবে।
  • 768px বা তার বেশি screen-এ container-এর width 90% হবে।
  • 1024px বা তার বেশি screen-এ container-এর সর্বোচ্চ width হবে 1200px।

3. Desktop-First vs. Mobile-First

দুই পদ্ধতির মূল পার্থক্য হলো design কোন screen size থেকে শুরু হচ্ছে।

Mobile-First Desktop-First
Mobile layout দিয়ে শুরু Desktop layout দিয়ে শুরু
min-width media query বেশি ব্যবহার করা হয় max-width media query বেশি ব্যবহার করা হয়
ছোট screen থেকে বড় screen-এ উন্নত করা হয় বড় screen থেকে ছোট screen-এ মানিয়ে নেওয়া হয়
Mobile-friendly design তৈরিতে সুবিধাজনক Desktop-focused design-এ উপযোগী হতে পারে

Mobile-First Example


      .card {
          width: 100%;
      }

      @media (min-width: 768px) {
          .card {
              width: 48%;
          }
      }

Desktop-First Example


      .card {
          width: 48%;
      }

      @media (max-width: 767px) {
          .card {
              width: 100%;
          }
      }

দুটিই কার্যকর পদ্ধতি। তবে নতুন responsive project-এ mobile-first approach একটি ভালো default choice।

4. Flexible layouts and fluid width

Flexible layout

Flexible layout এমন layout, যেখানে element-গুলোর width নির্দিষ্ট pixel-এর পরিবর্তে percentage বা অন্যান্য flexible unit দিয়ে নিয়ন্ত্রণ করা হয়।


      .container {
          width: 90%;
          margin-inline: auto;
      }

      .card {
          width: 48%;
      }

এখানে percentage ব্যবহার করার ফলে screen size পরিবর্তনের সঙ্গে element-এর width-ও পরিবর্তিত হয়।

তবে শুধু percentage ব্যবহার করলেই সম্পূর্ণ responsive design তৈরি হয় না। Content, spacing এবং layout-ও বিবেচনা করতে হয়।

Fluid Width

Fluid width হলো এমন width, যা parent container বা viewport-এর আকার অনুযায়ী পরিবর্তিত হয়।


      .container {
          width: 90%;
      }

      .image {
          width: 100%;
      }

width: 90% container-কে তার parent element-এর width-এর 90% দেয়। আর width: 100% image-কে তার containing element-এর পুরো width ব্যবহার করতে দেয়।

Fixed Width vs. Fluid Width


      /* Fixed width */
      .container {
          width: 1000px;
      }

      /* Fluid width */
      .container {
          width: 90%;
      }

Fixed width ছোট screen-এ overflow তৈরি করতে পারে। Fluid width সাধারণত বিভিন্ন screen size-এ মানিয়ে নিতে সুবিধা দেয়।

5. max-width and min-width

এই দুটি property responsive design-এ খুবই গুরুত্বপূর্ণ।

max-width

কোনো element-এর সর্বোচ্চ width নির্ধারণ করে।


      .container {
        width: 90%;
        max-width: 1200px;
        margin-inline: auto;
      }

এখানে container ছোট screen-এ সংকুচিত হতে পারবে, কিন্তু 1200px-এর বেশি চওড়া হবে না।

min-width

কোনো element-এর সর্বনিম্ন width নির্ধারণ করে।


      .card {
          width: 100%;
          min-width: 250px;
      }

এখানে card-এর width 250px-এর নিচে নামবে না। তাই parent container খুব ছোট হলে overflow হতে পারে।

মনে রাখবে: Responsive layout-এ min-width সতর্কতার সঙ্গে ব্যবহার করতে হয়। অনেক ক্ষেত্রে min-width-এর বদলে min-width-এর flexible বিকল্প বা Grid-এর minmax() বেশি উপযোগী হতে পারে।

Flexible বিকল্প min()


      .card {
          width: min(100%, 220px);
      }

Parent-এর width 200px হলে card-এর width হবে 200px
Parent-এর width 300px হলে card-এর width হবে 220px
অর্থাৎ, জায়গা কম হলে card ছোট হবে, আর জায়গা বেশি হলে সর্বোচ্চ 220px হবে।

Grid-এর minmax()


  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
  }

এখানে minmax() Grid-এর প্রতিটি column-এর minimum ও maximum size নির্ধারণ করে। আর min(100%, 220px) ছোট screen-এ column-কে parent-এর চেয়ে বড় হওয়া থেকে রক্ষা করতে সাহায্য করে।

    সহজে মনে রাখো:

  • min-width → width একটি নির্দিষ্ট মাপের নিচে নামতে পারবে না।
  • min() → দুটি মানের মধ্যে ছোট মানটি বেছে নেয়।
  • minmax() → Grid column-এর সর্বনিম্ন ও সর্বোচ্চ size নির্ধারণ করে।

6. Responsive Images

Responsive image হলো এমন image, যা তার container-এর বাইরে চলে যায় না এবং screen size অনুযায়ী সংকুচিত হতে পারে।


      img {
          max-width: 100%;
          height: auto;
          display: block;
      }

    ব্যাখ্যা:

  • max-width: 100%; → image-কে container-এর চেয়ে বড় হতে দেয় না।
  • height: auto; → image-এর original aspect ratio বজায় রাখে।
  • display: block; → image-এর নিচের unwanted inline space এড়াতে সাহায্য করে।

Card-এর image একই আকারে রাখতে চাইলে:


      .card img {
          width: 100%;
          aspect-ratio: 16 / 9;
          object-fit: cover;
      }

    ব্যাখ্যা:

  • width: 100%; → ছবির width নির্ধারণ করে।
  • aspect-ratio: 16 / 9; → ছবির width ও height-এর অনুপাত নির্ধারণ করে।
  • object-fit: cover; → ছবিকে container পূর্ণ করে দেখায়, প্রয়োজনে কিছু অংশ crop করে। কিন্তু ছবিটি চ্যাপ্টা বা লম্বা হয়ে বিকৃত হবে না।

এই তিনটি property একসঙ্গে ব্যবহার করলে card-এর ছবিগুলো responsive হয় এবং বিভিন্ন ছবির আকার আলাদা হলেও card-এর image area একই অনুপাতে রাখা যায়।

7. clamp() in Responsive Design

CSS-এর clamp() function ব্যবহার করে কোনো property-এর minimum, preferred এবং maximum value নির্ধারণ করা যায়।


      Syntax:

      clamp(minimum, preferred, maximum)

      Example:

      h1 {
          font-size: clamp(2rem, 5vw, 4rem);
      }
    এখানে:
  • 2rem হলো minimum font size।
  • 5vw হলো viewport-এর width অনুযায়ী পরিবর্তিত preferred size।
  • 4rem হলো maximum font size।

Screen ছোট হলে heading খুব ছোট হবে না এবং screen বড় হলেও অতিরিক্ত বড় হবে না।

clamp() responsive font size, padding, gap এবং অন্যান্য dimension নিয়ন্ত্রণ করতেও ব্যবহার করা যায়।

Flexible Typography

Flexible typography হলো screen size অনুযায়ী text-এর size পরিবর্তন করা, যাতে বিভিন্ন device-এ content পড়তে সুবিধা হয়।


      body {
          font-size: 1rem;
          line-height: 1.6;
      }

      h1 {
          font-size: clamp(2rem, 5vw, 3.5rem);
      }

      h2 {
          font-size: clamp(1.5rem, 3vw, 2.25rem);
      }

এখানে clamp() heading-এর size responsive করে। Body text-এর ক্ষেত্রে সাধারণত পড়ার উপযোগী, স্থিতিশীল font size এবং পর্যাপ্ত line height রাখা ভালো।

8. Responsive Layout Using Flexbox and Grid

Responsive Layout Using Flexbox

Flexbox দিয়ে element-গুলোকে এক row-তে অথবা প্রয়োজন অনুযায়ী একাধিক row-তে সাজানো যায়।


      <div class="card-container">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
  </div>

    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .card {
        flex: 1 1 250px;
    }
  • flex-wrap: wrap থাকার কারণে পর্যাপ্ত জায়গা না থাকলে card-গুলো পরের row-তে চলে যেতে পারে।
  • flex: 1 1 250px card-কে নমনীয়ভাবে জায়গা নিতে সাহায্য করে, যদিও চূড়ান্ত width container-এর জায়গা ও অন্যান্য constraint-এর ওপর নির্ভর করে।

Responsive Layout Using CSS Grid

CSS Grid দিয়ে screen size অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তিত card layout তৈরি করা যায়।


      <div class="grid-container">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <div class="card">Card 4</div>
  </div>

  .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
  }

    কীভাবে কাজ করে?

  • repeat() একই ধরনের column বারবার তৈরি করে।
  • auto-fit available space অনুযায়ী column সাজায়।
  • minmax(250px, 1fr) প্রতিটি column-এর minimum width 250px রাখে এবং অতিরিক্ত জায়গা থাকলে তা ভাগ করে দেয়।
  • gap card-গুলোর মাঝখানে space তৈরি করে।

এটি responsive card layout তৈরির একটি কার্যকর পদ্ধতি।

9. Practice Project: Responsive Landing Page

এখন শেখা বিষয়গুলো ব্যবহার করে একটি simple responsive landing page তৈরি করো।

    Project Requirements:
  1. একটি header এবং navigation bar তৈরি করো।
  2. একটি hero section যোগ করো।
  3. একটি heading, paragraph এবং button রাখো।
  4. তিনটি feature card তৈরি করো।
  5. Flexbox অথবা CSS Grid দিয়ে card layout তৈরি করো।
  6. max-width ব্যবহার করে content-এর সর্বোচ্চ width নিয়ন্ত্রণ করো।
  7. Responsive image এবং clamp() ব্যবহার করো।
  8. Mobile, tablet এবং desktop screen-এ layout পরীক্ষা করো।

Suggested HTML Structure


      <header class="header">
          <nav class="navbar">
              <a href="#" class="logo">Osila</a>
              <a href="#features">Features</a>
          </nav>
      </header>

      <main>
          <section class="hero">
              <h1>Build Better Websites</h1>
              <p>Learn modern web design with simple examples.</p>
              <a href="#features" class="button">Get Started</a>
          </section>

          <section id="features" class="features">
              <article class="card">Feature One</article>
              <article class="card">Feature Two</article>
              <article class="card">Feature Three</article>
          </section>
      </main>

    Your Challenge

    নিজে CSS লিখে project সম্পূর্ণ করো। নিচের বিষয়গুলো নিশ্চিত করো:
  • Mobile screen-এ content সুন্দরভাবে stack হবে।
  • বড় screen-এ feature card-গুলো পাশাপাশি থাকবে।
  • কোনো unwanted horizontal scrolling থাকবে না।
  • Text ও image container-এর বাইরে যাবে না।
  • Layout দেখতে পরিষ্কার এবং ব্যবহার করতে সহজ হবে।

Conclusion

Responsive Web Design আধুনিক frontend development-এর একটি গুরুত্বপূর্ণ দক্ষতা। Mobile-first approach, flexible widths, responsive images, clamp(), Flexbox এবং CSS Grid ব্যবহার করে বিভিন্ন screen size-এর জন্য কার্যকর layout তৈরি করা যায়।

শুধু media query মুখস্থ না করে, কেন এবং কখন একটি layout পরিবর্তন করতে হবে তা বোঝার চেষ্টা করো। নিয়মিত practice করলে responsive website তৈরিতে দক্ষতা বাড়বে।

Next Topic: 04. CSS Media Queries — Complete Guide