রেসপন্সিভ ডিজাইনে ফ্লোটিং এলিমেন্টগুলো স্ক্রিন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে পজিশন পরিবর্তন করতে পারে। নিচে মিডিয়া কোয়েরি ব্যবহার করে ফ্লোট ডায়ন থেকে বামে রূপান্তরের উদাহরণ দেওয়া হল।
উদাহরণ: রেসপন্সিভ ফ্লোট
<!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;
}
.floatRight, .floatLeft {
color: white;
font-size: 20px;
padding: 10px;
font-weight: 500;
}
.floatRight {
background-color: rgb(0, 2, 95);
float: right;
}
.floatLeft {
background-color: rgb(85, 0, 74);
float: left;
}
@media (max-width: 768px) {
.floatRight {
float: left;
}
.floatLeft {
float: right;
}
}
</style>
</head>
<body>
<h1>রেসপন্সিভ ফ্লোট উদাহরণ</h1>
<h2>ছোট স্ক্রিনে ফ্লোটগুলো পজিশন বদলাবে</h2>
<div class="clearfix">
<div class="floatRight">ফ্লোট রাইট ></div>
<div class="floatLeft">ফ্লোট লेफট <</div>
<br />
</div>
</body>
</html>
কোড ব্যাখ্যা
- .floatRight এবং .floatLeft: ডেস্কটপে ডান ও বামে ফ্লোট করে।
- @media (max-width: 768px): ৭৬৮px নিচে স্ক্রিন হলে ফ্লোট ডিরেকশন উল্টা হয়।
- .clearfix: ফ্লোট করা চাইল্ড এলিমেন্টের জন্য প্যারেন্টের উচ্চতা বজায় রাখে।
উন্নত টিপস
আধুনিক CSS-এ Flexbox বা Grid ব্যবহার করলে ফ্লোটের চেয়ে আরও সহজে রেসপন্সিভ লেআউট করা যায়। তবে লিগেসি সাপোর্টের জন্য ফ্লোট＋ক্লিয়ারফিক্স এখনও প্রাসঙ্গিক।
