মিডিয়া কোয়েরি ব্যবহার করে স্ক্রিন প্রস্থ অনুযায়ী কলামের প্রস্থ এবং লেআউট স্বয়ংক্রিয়ভাবে পরিবর্তন করা যায়।
উদাহরণ: রেসপন্সিভ লেআউট পরিবর্তন
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
* { box-sizing: border-box; }
.col { color: white; float: left; width: 25%; padding: 10px; }
.colContainer:after { content: ""; display: table; clear: both; }
@media screen and (max-width: 900px) { .col { width: 50%; } }
@media screen and (max-width: 600px) { .col { width: 100%; } }
</style>
</head>
<body>
<h1>স্ক্রিন সাইজ অনুযায়ী লেআউট পরিবর্তন CSS-এ</h1>
<h2>স্ক্রিন রিসাইজ করুন নিচের ডিভগুলো রিসাইজ होते দেখতে</h2>
<div class="colContainer">
<div class="col" style="background-color: rgb(153, 29, 224);"><h2>প্রথম কলাম</h2></div>
<div class="col" style="background-color: rgb(12, 126, 120);"><h2>দ্বিতীয় কলাম</h2></div>
<div class="col" style="background-color: rgb(207, 41, 91);"><h2>তৃতীয় কলাম</h2></div>
<div class="col" style="background-color: rgb(204, 91, 39);"><h2>চতুর্থ কলাম</h2></div>
</div>
</body>
</html>
কোড ব্যাখ্যা
- ডেস্কটপ (>900px): ৪ কলাম (২৫% প্রতিটি)।
- ট্যাবলেট (600-900px): ২ কলাম (৫০% প্রতিটি)।
- মোবাইল (<600px): ১ কলাম (১০০%)।
- .colContainer:after { clear: both }: ফ্লোট ক্লিয়ার।
আধুনিক পদ্ধতি
Flexbox (`flex-wrap: wrap`) বা CSS Grid (`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))`) ব্যবহার করলে মিডিয়া কোয়েরি কম লাগে।
