CSS-এ বিভিন্ন স্ক্রিনের জন্য লেআউট পরিচিতি

আধুনিক বিশ্বে, একটি ওয়েবসাইটকে বিভিন্ন স্ক্রিন আকারের ডিভাইসে সুন্দরভাবে প্রদর্শিত হতে হবে।

সাধারণত, ডিভাইসগুলিকে চারটি শ্রেণীতে বিভক্ত করা হয়: ডেস্কটপ (desktop), ল্যাপটপ, ট্যাবলেট (tablet) এবং মোবাইল ফোন (mobile)।

প্রাচীনকালে, সমস্ত ডিভাইসের জনপ্রিয় স্ক্রিনের আকার জানা ছিল, সৌভাগ্যবশত সেগুলোর সংখ্যা বেশি ছিল না। এবং ওয়েবসাইটগুলি এমনভাবে তৈরি করা হত যাতে তারা পরিচিত রেজোলিউশনের তালিকায় সঠিকভাবে প্রদর্শিত হয়।

বর্তমানে, ডিভাইসের সংখ্যা এত বেশি হয়ে গেছে যে ওয়েবসাইট তৈরির জন্য প্রয়োজনীয় রেজোলিউশনের একটি তালিকা তৈরি করা অসম্ভব। এখন এটি বিশ্বাস করা হয় যে লেআউট যেকোনো আকারের স্ক্রিনে সঠিকভাবে প্রদর্শিত হওয়া উচিত।

এটি লেআউটের মূল পয়েন্টে ব্লকগুলির পুনর্বিন্যাসের মাধ্যমে অর্জন করা হয়। এই মূল পয়েন্টগুলি নির্দিষ্ট ডিভাইসের জন্য নয়, বরং ওয়েবসাইটের কন্টেন্টের জন্য নির্বাচন করা হয় - যাতে এটি ভাল দেখায়।

মূল পয়েন্টগুলির মধ্যে, ওয়েবসাইটের উপাদানগুলির প্রস্থ পরিবর্তনশীল হওয়া উচিত, যাতে এটি স্ক্রিনের প্রস্থের সাথে খাপ খায়। এবং মূল পয়েন্টগুলিতে, ব্লকগুলি অন্য অবস্থানে পুনর্বিন্যাস করা হয়।

বর্ণিত লেআউটটিকে অ্যাডাপটিভ বা রেস্পন্সিভ (responsive) বলা হয়। আমরা পরবর্তী পাঠগুলোতে এটির অধ্যয়ন নিয়ে কাজ করব।