রেসপনসিভ ওয়েব ডিজাইন মানে HTML ও CSS ব্যবহার করে একটি ওয়েবসাইটকে স্বয়ংক্রিয়ভাবে রিসাইজ, হাইড, সংকুচিত বা বড় করা, যাতে এটি সব ডিভাইসে (ডেস্কটপ, ট্যাবলেট এবং ফোন) ভালো দেখায়:
মনে রাখবেন: একটি ওয়েব পেজ যেকোনো ডিভাইসেই ভালো দেখানো উচিত!
রেসপনসিভ ওয়েব পেজ তৈরির সময়, আপনার সব ওয়েব পেজে নিচের <meta> এলিমেন্টটি যোগ করুন:
<meta name="viewport" content="width=device-width, initial-scale=1.0">এটি আপনার পেজের ভিউপোর্ট সেট করবে, যা ব্রাউজারকে পেজের মাপ ও স্কেলিং নিয়ন্ত্রণ করার নির্দেশনা দেবে।
রেসপনসিভ ইমেজ হলো এমন ইমেজ, যা যেকোনো ব্রাউজারের আকারে সুন্দরভাবে খাপ খেয়ে যায়।
CSS-এর width প্রপার্টি 100% সেট করা থাকলে, ইমেজটি রেসপনসিভ হবে এবং ছোট-বড় হবে:
<img src="img_girl.jpg" style="width:100%;">লক্ষ্য করুন, উপরের উদাহরণে, ইমেজটি তার আসল আকারের চেয়ে বড় হয়ে যেতে পারে। অনেক ক্ষেত্রে, এর পরিবর্তে max-width প্রপার্টি ব্যবহার করা একটি ভালো সমাধান।
max-width প্রপার্টি 100% সেট করা থাকলে, প্রয়োজনে ইমেজটি ছোট হবে, কিন্তু কখনো তার আসল আকারের চেয়ে বড় হবে না:
<img src="img_girl.jpg" style="max-width:100%;height:auto;">HTML <picture> এলিমেন্ট আপনাকে বিভিন্ন ব্রাউজার উইন্ডো আকারের জন্য ভিন্ন ভিন্ন ইমেজ নির্ধারণ করতে দেয়।
নিচের ইমেজটি প্রস্থ অনুযায়ী কীভাবে পরিবর্তিত হয় তা দেখতে ব্রাউজার উইন্ডো রিসাইজ করুন:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>টেক্সট সাইজ একটি "vw" ইউনিট দিয়ে সেট করা যায়, যার মানে "viewport width" (ভিউপোর্টের প্রস্থ)।
এভাবে টেক্সট সাইজ ব্রাউজার উইন্ডোর আকার অনুযায়ী পরিবর্তিত হবে:
টেক্সট সাইজ কীভাবে স্কেল হয় তা দেখতে ব্রাউজার উইন্ডো রিসাইজ করুন।
<h1 style="font-size:10vw">Hello World</h1>
<p style="font-size:2vw;">Resize the browser window to see how the text size scales.</p>ভিউপোর্ট হলো ব্রাউজার উইন্ডোর আকার। 1vw = ভিউপোর্টের প্রস্থের 1%। ভিউপোর্ট 50cm প্রশস্ত হলে, 1vw হলো 0.5cm।