🔖 রেসপন্সিভ ডিজাইন (Responsive Design)
আজকাল মানুষ ল্যাপটপ থেকে শুরু করে স্মার্টফোন, এমনকি স্মার্ট টিভিতেও ওয়েবসাইট দেখে। তাই একটি ওয়েবসাইট যেন সব স্ক্রিনে ঠিকমতো মানিয়ে যায়, তাকেই রেসপন্সিভ ডিজাইন বলে।
📌 Media Queries (মিডিয়া কোয়েরি)
রেসপন্সিভ ডিজাইনের প্রধান হাতিয়ার হলো মিডিয়া কোয়েরি। এটি দিয়ে আপনি ব্রাউজারকে বলতে পারেন: “যদি স্ক্রিন সাইজ এত হয়, তবে এই CSS রুল কাজ করবে।”
/* ডিফল্ট ডিজাইন (মোবাইলের জন্য) */
.box {
width: 100%;
}
/* যখন স্ক্রিন 768px বা তার বড় হবে (ট্যাবলেট/ল্যাপটপ) */
@media (min-width: 768px) {
.box {
width: 50%;
}
}
/* যখন স্ক্রিন 1024px বা তার বড় হবে (ডেস্কটপ) */
@media (min-width: 1024px) {
.box {
width: 33.33%;
}
}📌 🥷 নিঞ্জা অ্যাপ্রোচ: “Mobile First” ডিজাইন
অনেক নতুন ডেভেলপার আগে বড় স্ক্রিনের (ডেস্কটপ) জন্য ডিজাইন করে, তারপর ছোট স্ক্রিনের (মোবাইল) জন্য তা ঠিক করার চেষ্টা করে (max-width ব্যবহার করে)। এটি একটি ভুল পদ্ধতি! ❌
Mobile First (মোবাইল ফার্স্ট):
প্রফেশনালরা প্রথমে মোবাইলের জন্য (ছোট স্ক্রিন) ডিফল্ট ডিজাইন লেখে। এরপর min-width মিডিয়া কোয়েরি ব্যবহার করে আস্তে আস্তে বড় স্ক্রিনের জন্য ডিজাইন অ্যাডজাস্ট করে। এই পদ্ধতিতে কোড কম লিখতে হয় এবং বাগ কম থাকে!
📌 রেসপন্সিভ ইউনিট (Responsive Units)
ফিক্সড পিক্সেল (px) ব্যবহার না করে রেসপন্সিভ ইউনিট ব্যবহার করুন:
%(পার্সেন্টেজ): প্যারেন্ট এলিমেন্টের সাইজের উপর নির্ভর করে।vw(Viewport Width): স্ক্রিনের মোট চওড়ার উপর নির্ভর করে (100vw = পুরো স্ক্রিন)।vh(Viewport Height): স্ক্রিনের উচ্চতার উপর নির্ভর করে (100vh = পুরো স্ক্রিনের উচ্চতা)।
.hero-section {
width: 100%; /* ফুল উইডথ */
height: 100vh; /* স্ক্রিনের একদম নিচ পর্যন্ত */
}📌 রেসপন্সিভ ইমেজ (Responsive Images)
মোবাইল স্ক্রিনে ছবি যেন কন্টেইনারের বাইরে চলে না যায়, তার জন্য নিচের কোডটি ব্যবহার করুন:
img {
max-width: 100%;
height: auto;
}এটি যেকোনো ছবিকে রেসপন্সিভ করে দেবে! ছবি বড় হলে সংকুচিত হবে, কিন্তু ছোট হলে ফেটে যাবে না। ✨