14. HTML Responsive Design
📘 কনসেপ্ট (থিওরি)
রেসপন্সিভ ওয়েব ডিজাইন আপনার পেজকে সব ডিভাইসে — ডেস্কটপ, ট্যাবলেট এবং ফোনে — সুন্দর দেখায়।
**ভিউপোর্ট মেটা ট্যাগ** (রেসপন্সিভ ডিজাইনের জন্য আবশ্যক):
**রেসপন্সিভ ছবি:**
**CSS মিডিয়া কোয়েরি:**
**মূল নীতি:**
- নির্দিষ্ট পিক্সেলের বদলে আপেক্ষিক একক (%, vw, vh, rem) ব্যবহার করুন
- ছবিতে
width এর বদলে max-width ব্যবহার করুন
- লেআউটের জন্য CSS Flexbox বা Grid ব্যবহার করুন
- বিভিন্ন স্ক্রিন সাইজে পরীক্ষা করুন💡 উদাহরণ
একটি রেসপন্সিভ কার্ড লেআউট:
Box 1
Box 2
Box 3
🎯 আপনার কাজ (প্র্যাকটিস)
Flexbox ব্যবহার করে ৩-কলামের রেসপন্সিভ লেআউট তৈরি করুন যা ছোট স্ক্রিনে ১ কলামে পরিণত হয়।
main.html
Loading...
OUTPUT