মিডিয়া কোয়েরি ব্যবহার করে নির্দিষ্ট ব্রেকপয়েন্টে কলামের প্রস্থ পরিবর্তন করা যায়।
উদাহরণ: কলাম প্রস্থ পরিবর্তন
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.sample { width: 50%; background-color: lightblue; height: 200px; font-size: 18px; }
@media only screen and (max-width: 700px) {
body { margin: 0; padding: 0; }
.sample { width: 100%; }
}
</style>
</head>
<body>
<h1>স্ক্রিন সাইজ অনুযায়ী কলাম প্রস্থ পরিবর্তন</h1>
<div class="sample">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores!</div>
<h3>ব্রাউজার উইন্ডো ৭০০px এবং নিচে রিসাইজ করুন ডিভ প্রস্থ ১০০% হওয়া দেখতে</h3>
</body>
</html>
কোড ব্যাখ্যা
- ডিফল্ট: width: 50% — ডেস্কটপে অর্ধেক প্রস্থ।
- @media (max-width: 700px): .sample { width: 100%; } — ৭০০px নিচে ফুল প্রস্থ।
রেসপন্সিভ ব্রেকপয়েন্ট রেফারেন্স
- 576px — মোবাইল ল্যান্ডস্কেপ
- 768px — ট্যাবলেট
- 992px — ডেস্কটপ
- 1200px — লার্জ ডেস্কটপ
