রেসপন্সিভ ওয়েব ডিজাইন ব্যবহার করা হয় যাতে আপনার ওয়েব পৃষ্ঠাকে উপযুক্ত, ভালো এবং সব ডিভাইসে (ডেস্কটপ, ট্যাবলেট, স্মার্টফোন ইত্যাদি) ভালোভাবে স্থাপন করা হয়।

প্রতিক্রিয়াশীল ওয়েব ডিজাইন সামগ্রীর আকার পরিবর্তন, লুকাতে, সঙ্কুচিত করতে, বড় করতে বা সরাতে HTML এবং CSS ব্যবহার করে। এটি যেকোনো স্ক্রিনে বিষয়বস্তুকে ভালো দেখায়।

ভিউপোর্ট সেট করুন

চলুন দেখে নেই কিভাবে ভিউপোর্ট সেট করবেন।

কিভাবে ভিউপোর্ট সেট করতে হয়

যে ছবিগুলিকে ব্রাউজার আকারের সাথে মানানসই করতে সুন্দরভাবে স্কেল করা যায় সেগুলি প্রতিক্রিয়াশীল ছবি হিসাবে পরিচিত।

প্রস্থ সম্পত্তি ব্যবহার করে

ছবিকে প্রতিক্রিয়াশীল করতে এবং উপরে এবং নিচে স্কেল করতে CSS প্রস্থের বৈশিষ্ট্য 100% সেট করুন।

উদাহরণ

দ্রষ্টব্য: উপরের পদ্ধতির সাথে একটি সমস্যা (প্রস্থ: 100%) হল যে ছবিটি তার আসল আকারের চেয়ে বড় হতে পারে। সুতরাং, এর পরিবর্তে সর্বাধিক-প্রস্থ সম্পত্তি ব্যবহার করা ভাল।

এই পদ্ধতিটি সর্বোত্তম এবং সর্বাধিক ব্যবহৃত কারণ এটি সহজ করে যে চিত্রটি যদি এটির প্রয়োজন হয় তবে এটিকে ছোট করবে, তবে কখনই এটির আসল আকারের চেয়ে বড় হতে পারে না।

উদাহরণ

HTML উপাদান ব্যবহার করে, আপনি ব্রাউজারের প্রস্থ অনুযায়ী দুই বা তার বেশি ছবি সেট করতে পারেন। আপনি যখন ব্রাউজার-আকার পরিবর্তন করবেন তখন এটি ছবি পরিবর্তন করবে। অর্থাৎ ডেস্কটপ এবং ফোন।

উদাহরণ

1.   
2.   
3. “viewport” content=“width=device-width, initial-scale=1.0”>  
4.   
5. 
   

   Change Images Depending on Browser Width

    

6. Resize the browser width and the image will change at 600px and 1500px.

    

7.   
8. “img_smallflower.jpg” media=“(max-width: 600px)”>(Change image)  
9. “img_flowers.jpg” media=“(max-width: 1500px)”>(Change image)  
10. “flowers.jpg”>  
11. “img_flowers.jpg” alt=“Flowers” style=“width:auto;”>  
12.   
13.   
14. </html

আমরা “uv” ইউনিট ব্যবহার করে পাঠ্যের আকার প্রতিক্রিয়াশীল করতে পারি। এর অর্থ ভিউপোর্ট-প্রস্থ। এটি ব্যবহার করে, আমরা ব্রাউজার উইন্ডো স্ক্রীন অনুসরণ করার জন্য পাঠ্যের আকার তৈরি করতে পারি।

উদাহরণ

1.   
2.   
3. “viewport” content=“width=device-width, initial-scale=1.0”>  
4.   

5. “font-size:10vw;”

   >Here size is 10vw. 

6. “font-size:6vw;”

   >Here size is 6vw. 

7. “font-size:4vw;”

   >Here size is 4vw. 

8. Resize the browser window to see how the text size changes.

    

9.   
10.   

দ্রষ্টব্য: ভিউপোর্ট ব্রাউজার উইন্ডোর আকার নির্দিষ্ট করে। 1vw = ভিউপোর্ট প্রস্থের 1%। মানে, যদি ভিউপোর্ট 100cm চওড়া হয়, 1vw হল 1.0cm৷

আমরা প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করতে মিডিয়া ক্যোয়ারী ব্যবহার করতে পারি। এখান থেকে মিডিয়া কোয়েরির বিস্তারিত পড়ুন: মিডিয়া কোয়েরি