ক্যাটাগরি ট্রিগার :

6/recent/ticker-posts

Responsive Layout কী?

July 19, 2025

 


📱 Responsive Layout কী?

Responsive Layout মানে:

তোমার ওয়েবসাইট যেন মোবাইল, ট্যাবলেট, ল্যাপটপ — সব স্ক্রিনে সুন্দরভাবে দেখায়।

✅ কিভাবে Responsive Layout তৈরি করা যায়?

🔑 ৩টি প্রধান পদ্ধতি:

  1. CSS Media Queries

  2. Flexible Layout (percentage, flexbox, grid)

  3. Mobile-first Design

📦 উদাহরণ: একটি Responsive Layout (HTML + CSS)


<!DOCTYPE html>
<html>
<head>
  <title>Responsive Layout</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #3498db;
      color: white;
      padding: 20px;
      text-align: center;
    }

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

    .box {
      flex: 1 1 300px;
      background-color: #ecf0f1;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
    }

    @media (max-width: 600px) {
      header {
        font-size: 18px;
      }

      .box {
        font-size: 16px;
        padding: 15px;
      }
    }
  </style>
</head>
<body>

  <header>
    <h1>আমার রেসপন্সিভ লেআউট</h1>
  </header>

  <div class="container">
    <div class="box">বক্স ১</div>
    <div class="box">বক্স ২</div>
    <div class="box">বক্স ৩</div>
  </div>

</body>
</html>

🔍 কী হচ্ছে এখানে?

অংশকাজ
flexবক্সগুলোকে পাশে পাশে রাখে (ল্যাপটপে)
flex-wrap: wrapছোট স্ক্রিনে নিচে চলে যায়
@media (max-width: 600px)মোবাইল স্ক্রিনে স্টাইল বদলে দেয়

📱 Responsive Layout দিয়ে তুমি করতে পারো:

  • মোবাইল ফ্রেন্ডলি ডিজাইন

  • এক কোডে সব ডিভাইসে সুন্দর ভিউ

  • দ্রুত লোড এবং ইউজার ফ্রেন্ডলি ইন্টারফেস


আপনার প্রিয়জনের সাথে শেয়ার করুন

আপনার মন্তব্য পোস্ট করুন

0 Comments