এর আগের পর্বে আমরা পার্সেন্টেজ এবং ফিক্সড উইথ এর মধ্যে পার্থক্য দেখেছি এবং আজকের পর্বে আমরা চাইল্ড এলিমেন্ট এর উপর ফিক্সড উইথ এবং পার্সেন্টেজের ব্যবহারটা দেখব।
চাইল্ড এলিমেন্ট কি ?
ধরুন, আমার একটা div আছে এবং সেই divমধ্যে h1 নামে একটি ট্যাগ আছে তাহলে সেই h1 নামে ট্যাগটাই হচ্ছে আমার divএর চাইল্ড এলিমেন্ট আর divহচ্ছে প্যারেন্ট এলিমেন্ট।
ফিক্সড উইথ
ধরা যাক, আমি একটা section ট্যাগ নিয়েছি এবং সেটার উইথ 100% এবং একটা ব্যাকগ্রাউন্ড কালার সেট করে দিয়েছি। এখন আমি এই sectionএর মধ্যে আরেকটা div নিয়েছি এবং একটা ব্যাকগ্রাউন্ড কালার সেট করে দিয়েছি।
এইবার আমার sectionটা একটা হচ্ছে parent আর div যেটা রয়েছে সেটা হচ্ছে child ( আমি কিন্তু এখনো চাইল্ডের উইট্টা সেট করে দেই নাই )।
এবার আমি child টার উইথ সেট করে দিলাম 700px এখন যখন আমার স্ক্রিনটা ছোট হয়ে যাবে 700px পিক্সেল থেকে তখন কিন্তু আমার যে child এলিমেন্ট ( div ) overflow করবে এবং এখানে আমাদের রেসপন্সিভ ইস্যু তৈরি হবে তার পাশাপাশি আমরা একটি scrollbar দেখতে পারবো আর এই scrollbar overflow এর কারণে আসছে।
example output:
পার্সেন্টেজে উইথ
উপরে আমরা আমাদের child এলিমেন্টটের উইথ 700px মানে ফিক্সড উইথ সেট করে দিয়েছিলাম এবং এটি আমাদের জন্য রেসপন্সিভ ইস্যু তৈরি করেছিল।
কিন্তু এবার আমরা পার্সেন্টেজ ইউজ করে সেই ইস্যুটা সলভ করে ফেলব।
এবার আমাদের যে child div রয়েছে সেটার উইথ 80% দিয়ে দেবো এবং এখন যদি আমাদের স্ক্রিন টা ছোট হয় অথবা বড় হয় তাহলে কিন্তু কোন রেসপন্সিভ ইস্যু দেখা দেবে না।
কারণ হচ্ছে, আমরা আমাদের child div এর উইথ 80% পার্সেন্ট দিয়েছি আর এই 80% কিন্তু সে প্যারেন্ট div এর কাছ থেকে নিয়ে নিবে, সেটা ছোট স্ক্রিনে হোক বা বড় স্ক্রিনে পেরেন্ট divযতটুকু জায়গা থাকবে তার মধ্যে থেকে চাইল্ড div 80% পার্সেন্ট জায়গা নিয়ে নিবে।
example output:
তাহলে আমাদের রেস্পন্সিভ ইস্যুটা সলভ হয়ে গেছে কারণ এবার আমাদের স্ক্রিন বড় হোক কিংবা ছোট হোক আমাদের child এলিমেন্ট 80% জায়গা নিয়ে নিবে প্যারেন্ট এলিমেন্ট এর কাছ থেকে। এভাবে করে কিন্তু আমরা খুব সহজে আমাদের ওয়েবসাইটের প্রত্যেকটা সেকশন রেস্পনসিভ করতে পারব।
আর আমরা সব সময় চেষ্টা করব যে ফিক্সড উইথ avoid করার কারণ ফিক্সড উইথ একটা নির্দিষ্ট জায়গা দিয়ে দেয় যা আমাদের ছোট স্ক্রিনে গেলে প্রবলেম হবে আবার বড় স্ক্রিনে গেলে যে জায়গায় আমরা ফিক্সড করে সেট করে দেবো ওইটা ছোট হয়ে যাবে।
পরিবর্তে যদি আমরা পার্সেন্টেজ উইথ সেট করে দেই তাহলে আমরা যখন ছোট যাব তখন ওই পারসেন্টেজ অনুযায়ী স্কিনের সাইজ থেকে জায়গা দখল করে নেবে আমাদের section/div আবার যখন বড় স্ক্রিনে যাবে তখন ওই স্ক্রিনে সাইজ থেকে পার্সেন্টেজ অনুযায়ী জায়গা দখল করে নেবে।
Frontend Engineer | Building tools that make developers' lives easier, one commit at a time.
