HTML Responsive
HTML Responsive Design (রেসপনসিভ ডিজাইন)
রেসপনসিভ ডিজাইন মানে হলো এমন একটি ওয়েবসাইট যা বিভিন্ন ডিভাইস (যেমন মোবাইল, ট্যাব, ল্যাপটপ)-এর স্ক্রিন অনুযায়ী নিজেকে স্বয়ংক্রিয়ভাবে মানিয়ে নিতে পারে।
📘 প্রধান উপাদানসমূহ
- Viewport meta tag — ডিভাইস স্ক্রিন অনুযায়ী পৃষ্ঠা সামঞ্জস্য রাখে।
- CSS max-width — ইমেজ বা কনটেন্ট বড় স্ক্রিনে প্রসারিত হতে দেয় না।
- Media Queries — স্ক্রিন সাইজ অনুযায়ী CSS পরিবর্তন করতে ব্যবহৃত হয়।
🧩 উদাহরণ ১: Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
🧩 উদাহরণ ২: Responsive Image
<img src="image.jpg" style="max-width:100%;height:auto;" alt="রেসপনসিভ ইমেজ">
🧩 উদাহরণ ৩: Media Query
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
🎯 গুরুত্বপূর্ণ তথ্য:
- সবসময় head ট্যাগে viewport meta tag দিন।
- CSS-এ শতাংশ (%), em বা rem ইউনিট ব্যবহার করলে স্কেলিং সহজ হয়।
- Media queries বিভিন্ন ডিভাইস অনুযায়ী ডিজাইন পরিবর্তনে সাহায্য করে।
🧠 অনুশীলন:
- একটি ওয়েব পৃষ্ঠা তৈরি করুন যেখানে একটি রেসপনসিভ ইমেজ থাকবে।
- একটি media query যোগ করুন, যাতে ছোট স্ক্রিনে ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হয়।
