রেসপনসিভ ওয়েব ডিজাইন হল এক ধরনের ডিজাইন টেকনিক যা সব ধররেন ওয়েব ব্রাউজার ও ডিভাইস একই ওয়েব পেজ কে ফিট করে বা বলা যায় সমস্ত ডিভাইসে ভাল দেখায়!
একটি রেসপনসিভ ওয়েব ডিজাইন অটোমেটিক ভাবে সব ডিভাইস এর ভিউপোর্ট এ সেট করে।
Responsive Web Design কি?
Responsive Web Design করা হয় HTML এবং সিএসএস ব্যবহার করে যা অটোমেটিক ভাবে ওয়েবপেজ কে রিসেট করে নেয় প্রয়োজন অনুসারে । এই ব্যবস্থায় ওয়েব পেজের কন্টেন্ট গুলো প্রয়োজন অনুসারে বড়ো বা ছোট এমন কি হাইড ও হয় এবং সব ধরনের ডিভাইস যেমন ডেক্সটপ, ট্যাবলেট কিংবা ফোন এ ভালো ভাবে সেট হয়।
ভিউপোর্ট সেটিং
একটি রেসপনসিভ ওয়েবসাইট তৈরি করতে, আপনার সমস্ত ওয়েব পৃষ্ঠায় নিম্নলিখিত <meta> ট্যাগ যুক্ত করুন
<meta name="viewport" content="width=device-width, initial-scale=1.0">
এটি ওয়েবপৃষ্ঠার ডাইমেনশন এবং স্কেলিং কীভাবে নিয়ন্ত্রণ করবেন সে সম্পর্কে ব্রাউজারকে নির্দেশ দেয়।
width=device-width অংশটি ডিভাইসের স্ক্রিন-প্রস্থ (যা ডিভাইসের উপর নির্ভর করে পরিবর্তিত হবে) অনুসরণ করার জন্য পৃষ্ঠার প্রস্থ নির্ধারণ করে
initial-scale=1.0 পৃষ্ঠাটি প্রথম ব্রাউজারে লোড হবার সময় প্রাথমিক জুম সেট করে
নিচে ভিউপোর্ট মেটা ট্যাগ ছাড়াই ওয়েব পৃষ্ঠা এবং ভিউপোর্ট মেটা ট্যাগ সহ একই ওয়েব পৃষ্ঠার উদাহরণ দেয়া হলো
আপনি যদি এই পৃষ্ঠাটি ফোন বা একটি ট্যাবলেট দিয়ে ব্রাউজ করছেন তবে পার্থক্যটি দেখতে নীচের দুটি লিঙ্কে ক্লিক করতে পারেন।
রিসপনসিভ ইমেজ
রেসপনসিভ ইমেজ হচ্ছে সেই সব ইমেজ যা ব্রাউজার সাইজ এর সাথে সাথে নিজেকে ফিট করে ।
ইমেজ রেসপনসিভ width প্রপার্টি ব্যবহার করা
সাধারন ভাবে ওয়েব পেজে ইমেজ ইনসার্ট করলে সেটিতে width property অনেক সময় যোগ করা হয়না কিংবা হলেও ফিসক্ড সাইজ বসিয়ে দেয়া হয় । ফলে ছবিটি রেসপনসিভ হয়না । কিন্তু সিএসএস width কিংবা max-width ব্যবহার করে সহজেই ইমের রেসপনসিভ করা যায়।
রেসপনসিভ ওয়েবসাইট ডিজাইন এর প্রজেক্ট ভিত্তিক ভিডিও টিউটোরিয়াল