মোবাইল-ফার্স্ট ডিজাইন মানে ওয়েবসাইট প্রথমে মোবাইলের জন্য বানানো, তারপর CSS মিডিয়া কোয়েরি দিয়ে বড় স্ক্রিনের (ট্যাবলেট, ডেস্কটপ) জন্য লেআউট কন্ট্রোল করা। মিডিয়া কোয়েরিকে ব্রেকপয়েন্ট বলা হয়।
ব্রেকপয়েন্ট উদাহরণ
মোবাইল → ট্যাবলেট ৮০০পিক্সেলে:
@media screen and (min-width: 800px) { /* Tablet styles */ }ট্যাবলেট → ডেস্কটপ ১২০০পিক্সেলে:
@media screen and (min-width: 1200px) { /* Desktop styles */ }এখন ৩টি স্ক্রিন রেঞ্জ: মোবাইল (০-৮০০), ট্যাবলেট (৮০০-১২০০), ডেস্কটপ (১২০০+)। ২টি ব্রেকপয়েন্টে এটি অচিভ করা হয়েছে।
ডেমো: https://codepen.io/StrengthandFreedom/pen/abzywPd
২টির বেশি ব্রেকপয়েন্ট দরকার হলে?
কিছু সাইট ১০টি ব্রেকপয়েন্ট ব্যবহার করে (প্রতি ১০০-২০০পিক্সেলে)। অধিকাংশ কেসে এটি অতি।
আইডিয়াল ব্রেকপয়েন্ট সংখ্যা কত?
কোনো ফিক্সড সংখ্যা নেই—কনটেক্সট গাইড করুক। জটিল ওয়েবসাইটে বেশি ব্রেকপয়েন্ট লাগে। গড়ে ২-৪টি ব্রেকপয়েন্টে অধিকাংশ বেস কভার হয়। আমি ৪টি পছন্দ করি।
৪ ব্রেকপয়েন্টের উদাহরণ
০-৮০০পিক্সেল জাম্প বড়—ল্যান্ডস্কেপ মোডে ফন্ট সাইজ ও কন্টেন্ট প্রস্থ সমস্যা হয়। আপটিমাল রিডিংয়ের জন্য লাইন-লেংথ ৪০-৮০ ক্যারেক্টার হওয়া উচিত।
অতিরিক্ত ব্রেকপয়েন্ট: ৪৮০পিক্সেল (মোবাইল ল্যান্ডস্কেপ), ১৯০০পিক্সেল (বড় মনিটর)।
ডেমো: https://codepen.io/StrengthandFreedom/pen/mdyMMeL
৪ ব্রেকপয়েন্টে টাইপোগ্রাফি বেশি গ্রেসফুলি স্কেল হয়।
শুধু ১টি ব্রেকপয়েন্টে চলবে?
১ ব্রেকপয়েন্ট মানে: মোবাইল লেআউট + ডেস্কটপ লেআউট (ব্রেকপয়েন্ট সাধারণত ৬০০-৯৬০পিক্সেল)। আধুনিক ডিভাইস ভেরিয়েশনের জন্য এটি অপটিমিস্টিক। ভালো UX-এর জন্য সাধারণত ১টির বেশি লাগে। কনটেক্সটই ডিজাইন ডিসিশন গাইড করুক।
