सीएसएस media queries

Media query की संरचना

Syntax: @media (condition) { /* CSS here */ }। आम conditions: (min-width: 768px) — "जब स्क्रीन 768px या चौड़ी हो तो लागू करें", (max-width: 767px) — "जब स्क्रीन 767px या narrower हो तो लागू करें", (orientation: landscape) — "landscape mode में लागू करें"।

Mobile-first media query pattern

Mobile के लिए base CSS लिखें। फिर बड़ी स्क्रीन के लिए progressively enhance करने के लिए min-width का उपयोग करें।

/* Mobile (base) */
.card { width: 100%; font-size: 14px; }

/* Tablet and up */
@media (min-width: 768px) {
  .card { width: 48%; font-size: 16px; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .card { width: 32%; font-size: 18px; }
}

आम breakpoints

ये चौड़ाइयाँ आम device categories से map करती हैं। कोई standard नहीं है; अपने content के अनुसार adjust करें।

/* Mobile (320px - 767px) */
body { font-size: 14px; }

/* Tablet (768px - 1023px) */
@media (min-width: 768px) {
  body { font-size: 16px; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  body { font-size: 18px; }
}

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
  body { font-size: 20px; }
}

त्वरित जाँच: @media (min-width: 768px) का क्या मतलब है?

• जब स्क्रीन 768px या चौड़ी हो तो लागू करें
• जब स्क्रीन 768px या narrower हो तो लागू करें
• केवल 768px पर लागू करें

Mobile-first में max-width से बचें

Mobile-first में, progressive enhancement के लिए min-width use करें। max-width desktop-first thinking है।