CSSIntermediate
CSS Responsive Design
Media query, breakpoint, fluid unit, mobile-first — সব ডিভাইসে সুন্দর দেখায় এমন রেসপনসিভ ডিজাইন বাংলায়।
12টি অংশবাংলা ভাষায়
Responsive design মানে একই ওয়েবপেজ মোবাইল, ট্যাবলেট ও ডেস্কটপ — সব স্ক্রিনে সুন্দর ও ব্যবহারযোগ্য থাকবে।
Media Query
/* মোবাইল: default */
@media (min-width: 640px) {
/* ট্যাবলেটের জন্য */
}
@media (min-width: 1024px) {
/* ডেস্কটপের জন্য */
}Mobile-first পদ্ধতি
সবচেয়ে ছোট স্ক্রিনের স্টাইল প্রথমে লিখি, তারপর min-width দিয়ে বড় স্ক্রিনের জন্য ঠিক করি। এতে ভিত্তি সহজ ও পরিচ্ছন্ন থাকে।
Fluid ইউনিট
| ইউনিট | কাজ |
|---|---|
| % | প্যারেন্টের % |
| vw / vh | ভিউপোর্টের প্রস্থ/উচ্চতা |
| rem | রুট ফন্ট সাইজের গুণিতক |
| clamp() | নূন্যতম থেকে সর্বোচ্চ মান |
.hero-title {
font-size: clamp(1.5rem, 4vw, 3rem);
}Responsive লেআউট
.container {
max-width: 1200px;
margin-inline: auto;
padding-inline: 1rem;
}
.dashboard {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.dashboard {
grid-template-columns: 260px 1fr;
}
}ছবিও responsive করুন
img { max-width: 100%; height: auto; } দিলে ছবি কনটেইনার ছাড়িয়ে যায় না এবং অনুপাত ঠিক থাকে।
পরীক্ষা করুন অনেক স্ক্রিনে
DevTools-এর device toolbar দিয়ে মোবাইল সাইজগুলো পরীক্ষা করুন এবং বিভিন্ন টেক্সট মাপ দেখুন — আলাদা ডিভাইসে সমস্যা আলাদা হয়।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।