Responsive Design ও Media Queries

Responsive Design কী?

একই ওয়েবসাইট যেন যেকোনো ডিভাইসে (মোবাইল, ট্যাবলেট, ডেস্কটপ) ভালো দেখায় — এটাই responsive design।

Viewport Meta Tag (আবশ্যক)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries

/* Mobile (default) */
body { font-size: 14px; }
.container { padding: 10px; }

/* Tablet (768px এবং বেশি) */
@media (min-width: 768px) {
    body { font-size: 16px; }
    .container { padding: 20px; }
}

/* Desktop (1024px এবং বেশি) */
@media (min-width: 1024px) {
    .container { max-width: 1200px; margin: 0 auto; }
}

Common Breakpoints

• Mobile: 0 - 767px
• Tablet: 768px - 1023px
• Desktop: 1024px - 1439px
• Large Desktop: 1440px+

Mobile-First vs Desktop-First

/* ✅ Mobile-First (সুপারিশকৃত) */
.card { width: 100%; }
@media (min-width: 768px) {
    .card { width: 50%; }
}
@media (min-width: 1024px) {
    .card { width: 33.33%; }
}

/* Desktop-First */
.card { width: 33.33%; }
@media (max-width: 1023px) {
    .card { width: 50%; }
}
@media (max-width: 767px) {
    .card { width: 100%; }
}

Media Query-র অন্যান্য ব্যবহার

/* Portrait vs Landscape */
@media (orientation: portrait) { ... }
@media (orientation: landscape) { ... }

/* Range */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* Print */
@media print {
    .no-print { display: none; }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    body { background: #000; color: #fff; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

Responsive Units

width: 100%;       /* parent এর শতাংশ */
width: 100vw;      /* viewport width */
height: 100vh;     /* viewport height */
font-size: 5vw;    /* viewport width এর ৫% */
font-size: clamp(1rem, 2vw, 1.5rem);  /* min, preferred, max */

/* Responsive Image */
img {
    max-width: 100%;
    height: auto;
}

CSS Variables (Custom Properties)

:root {
    --primary: #3498db;
    --secondary: #e74c3c;
    --spacing: 16px;
    --radius: 8px;
}

.btn {
    background: var(--primary);
    padding: var(--spacing);
    border-radius: var(--radius);
}

/* Dark mode switch */
[data-theme="dark"] {
    --bg: #000;
    --text: #fff;
}