স্বাগতম আপনাকে দ্বিতীয় পর্বে ( প্রথম পর্ব আমার আইডিতে আছে অথবা নিচে সাজেস্ট করতে পারে )।
এই পর্বে আমরা পারসেন্টেজ এবং ফিক্সড উইথের মধ্যে পার্থক্যটা দেখব। উইথ কিন্তু আমাদের রেস্পন্সিবল ওয়েবসাইট এর একটা মৌলিক বিষয়। কারন আমরা প্রত্যেকটি জায়গার বা সেকশন এর উইথ সেট করে দেই আর এই উইথ যদি আমরা ফিক্সড ভাবে দিয়ে দেই তাহলে এটা শুধু আমি যে স্ক্রিনে কাজ করব ওই স্ক্রিনেই পারফেক্ট দেখাবে, যখন এই স্ক্রিনটা ছোট হয়ে যাবে অথবা বড় হয়ে যাবে তখন কিন্তু এই সেকশনটার ডিজাইন লেআউট পুরো চেঞ্জ হয়ে যাবে বা ভেঙ্গে যাবে ডিজাইনটা। যার জন্য অবশ্যই আমাদের ফিক্সড উইথ এবং পারসেন্টেজ এর মধ্যে পার্থক্যটা দেখতে হবে।
ফিক্সট উইথ
ধরুন, আমার একটা ইমেজ আছে ওয়েবসাইটের মধ্যে এবং আমি সেই ইমেজটার উইথ সেট করে দিয়েছি 500 px এবার আমার স্কিন সাইজটা যখন 400 px এ চলে যাবে তখন কিন্তু আমার ইমেজটা বড় হয়ে যাবে আমাদের স্ক্রিন থেকে, আর এই জায়গায় আমাদের রেসপন্সিভ ইস্যুটা দেখা দিবে।
উপরের একটা ছোট্ট উদাহরণ ছিল যেটা দিয়ে আসলে ফিক্সড উইথটা সম্পর্কে বুঝানোর চেষ্টা করেছি।
উদাহরণের কোডঃ
<img
src="https://drive.google.com/file/d/1at3dn4B0-qcVNzAFnmLcXlJ2PZQ5KBt-/view?usp=sharing"
alt="testing/responsive"
class="image"
/>
.image {
width: 500px;
}
পার্সেন্টেজ
সেইমভাবে, আমাদের ওয়েবসাইটে একটা ইমেজ আছে এবং এইবার কিন্তু আমি কোন ফিক্সড উইথ দিব না এই ইমেজের আমি এই ইমেজের উইথের জায়গার পার্সেন্টেজ ব্যবহার করব আর তার জন্য আমি ইমেজের উইথের ভেলু 80% দিয়ে দেবো। এইবার আমার স্ক্রিনটা যখন ছোট হবে অথবা বড় হবে তখন আমার ওয়েবসাইটটা কিন্তু রেস্পন্সিভই থাকবে। কারন, আমরা উইথের ভেলু হিসেবে পার্সেন্টেজ ব্যবহার করেছি যেটা স্ক্রিন সাইজ সাইজের সাথে ডিপেন্ডেবল। আর আমাদের স্ক্রিন যত বড়ই হোক অথবা যত ছোটই হোক ইমেজের সাইজটা কিন্তু ওই স্কিন সাইজের থেকে 80% জায়গা নিয়ে নেবে।
উদাহরণের কোডঃ
<img
src="https://drive.google.com/file/d/1at3dn4B0-qcVNzAFnmLcXlJ2PZQ5KBt-/view?usp=sharing"
alt="testing/responsive"
class="image"
/>
.image {
width: 80%;
}
ডিফল্ট রেসপন্সিভ
ডিফল্ট রেস্পন্সিভ, বলতে বুঝানো হয়েছে আমরা আমাদের এইচটিএমএল কোডে যখন blook এলিমেন্ট ( div, heading tag, p etc ) ব্যবহার করি তখন সেটা ডিফল্টভাবে রেস্পন্সিবই থাকে। মানে ওই এলিমেন্টটার উইথ আমরা না দেওয়া সত্ত্বেও এলিমেন্টটা কিন্তু 100% উইথ নিয়ে নিচ্ছে ডিফল্ট ভাবে আর এটাকে ডিফল্ট রেস্পন্সিভ বলা হয়। এক্ষেত্রে আমরা যদি চাই যে আমাদের এই এলিমেন্টরা 100% উইথ নিক তাহলে আমাদের সিএসএস ফাইলে উইথ প্রপার্টিটা সিএসএস ব্যবহার না করলে ও হবে । আবার আমরা যদি চাই যে এই এলিমেন্ট টা ( 60%, 70%, 80% ) বা যাই হোক আমাদের ইচ্ছেমত উইথ নেবে তাহলে আমরা উইথ প্রপার্টিটা সিএসএস ফাইলে লিখে আমাদের মন মতো ভেলু দিতে পারব।
পরিশেষে আমরা বুঝতে পারলাম যে, ফিক্সড উইথ এর চাইতে পার্সেন্টেজ ব্যবহার করা ভালো তাতে আমরা যে সেকশন বা যে জিনিসের ভেলু হিসেবে পার্সেন্টেজ ব্যবহার করব সেটা সব স্ক্রিনে পারফেক্ট দেখাবে এবং আমাদের ওয়েবসাইটে কোন রেসপন্সিভ ইস্যু আসবে না। কিন্তু আমাদের এরকম হতে পারে যে কোন একটা সেকশনের বা এলিমেন্টের ফিক্সড উইথ দেওয়ার প্রয়োজন আছে, সেখানে আমরা ফিক্সড উইথ ব্যবহার করতে পারব সমস্যা নাই।
Frontend Engineer | Building tools that make developers' lives easier, one commit at a time.
