Cheatsheet और Interview Q&A

Responsive CSS quick reference

Responsive design के लिए essential patterns और syntax।

/* Viewport meta tag (in HTML head) */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* Mobile-first base */
.container { width: 100%; padding: 16px; }

/* Media query - tablet and up */
@media (min-width: 768px) { .container { padding: 24px; } }

/* Flexible units */
body { font-size: 1rem; } /* Use rem */
.box { width: 100%; max-width: 1200px; } /* Use % */

/* Clamp for smooth scaling */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

/* Images responsive */
img { max-width: 100%; height: auto; }

/* Grid auto-fit */
.grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

Interview Q&A

Q: Responsive design क्या है? A: ऐसा design जो flexible layouts, media queries, और flexible media का उपयोग करके किसी भी screen size के अनुसार adapt होता है।

Q: Mobile-first क्यों? A: CSS simpler है, content को prioritize करने को force करता है, और mobile 50%+ traffic है।

Q: max-width और min-width media queries में क्या अंतर है? A: min-width mobile-first (build up), max-width desktop-first (break down) है।

Q: आप images को responsive कैसे बनाते हैं? A: max-width: 100%, resolution के लिए srcset, और art direction के लिए का उपयोग करें।

Q: Minimum touch target size क्या है? A: 44x44px (Apple) या 48x48px (Android)।

Viewport units cheatsheet

Viewport और container-relative sizing के लिए quick reference।

/* Viewport units */
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1% of smaller dimension
1vmax = 1% of larger dimension

/* Usage */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }
.hero { height: 100vh; }
.sidebar { width: 25vw; }

Interview tip: अपने approach को explain करें

Interview में responsive design के बारे में पूछे जाने पर, तीन pillars, अपनी testing process, और अपने काम के real examples explain करें।