Mobile-First Design
Mobile-first ka matlab hai: DEFAULT styles mobile ke liye likho (bina kisi media query ke), phir min-width media queries se PROGRESSIVELY bade screens ke liye enhance karo. Ye "desktop-first" (max-width use karke chhote screens ke liye override) se opposite approach hai.
Mobile-first modern best practice hai kyunki: (1) Mobile traffic majority hai aajkal, (2) "Progressive enhancement" philosophy follow karta hai — base experience sabko milta hai, extras capable devices ko, (3) usually simpler, kam CSS override chahiye.
/* Mobile-first — DEFAULT (no media query) = mobile styles: */
.nav {
display: flex;
flex-direction: column; /* mobile: vertical stack */
}
.sidebar {
display: none; /* mobile: hidden, jagah nahi hai */
}
/* Progressive enhancement, bade screens ke liye: */
@media (min-width: 768px) {
.nav {
flex-direction: row; /* tablet+: horizontal */
}
.sidebar {
display: block; /* tablet+: dikhne lagta hai */
}
}- Default (no media query) = mobile styles
- min-width media queries = progressive enhancement, bade screens ke liye
- Modern best practice — mobile traffic majority, performance-friendly
Koi "official" breakpoints nahi hain, lekin common conventions hain: 576px (small phones), 768px (tablets), 992px (small desktops), 1200px (large desktops) — Bootstrap jaise popular frameworks se derive hue.
/* Common mobile-first breakpoint pattern: */
/* Default: mobile (< 576px) */
@media (min-width: 576px) { /* Small tablets */ }
@media (min-width: 768px) { /* Tablets */ }
@media (min-width: 992px) { /* Small desktops */ }
@media (min-width: 1200px) { /* Large desktops */ }Browser DevTools (F12 → device toolbar icon) responsive design test karne ka standard tareeka hai — different device sizes simulate kar sakte ho bina actual devices ke, aur live CSS changes bhi dekh sakte ho.
/* DevTools mein: */
/* 1. F12 se DevTools kholo
2. Device toolbar icon click karo (ya Ctrl+Shift+M)
3. Different devices/custom sizes try karo
4. Breakpoints jaha layout break ho rahi hai, wahi media query add karo */