पाठ 23 / 26
Cheatsheet और Interview Q&A
Quick reference: key terms, media query syntax, breakpoints, और common interview questions के answers।
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 करें।
अंतिम क्विज़ 1/8
अंतिम क्विज़
त्वरित जाँच: Mobile पर page को device width पर render करने वाला meta tag कौन-सा है?
- charset
- robots
- viewport
- description
Answer
viewport — Viewport meta tag mobile browsers को desktop width मानने से रोकता है।
अंतिम क्विज़ 2/8
अंतिम क्विज़
त्वरित जाँच: Mobile-first CSS में आप मुख्य रूप से कौन-सा query उपयोग करते हैं?
- max-width
- orientation only
- min-width
Answer
min-width — Base styles mobile को target करते हैं, और min-width बड़े screens के लिए layers जोड़ता है।
अंतिम क्विज़ 3/8
अंतिम क्विज़
त्वरित जाँच: clamp(1rem, 2.5vw, 2rem) क्या करता है?
- Scales smoothly between a minimum and maximum
- Fixes the size at 2.5vw
- Hides the element
- Sets a media query
Answer
Scales smoothly between a minimum and maximum — Value पसंदीदा size का अनुसरण करता है पर min और max से बाहर नहीं जाता।
अंतिम क्विज़ 4/8
अंतिम क्विज़
त्वरित जाँच: कौन-सा Grid pattern बिना media queries के responsive columns बनाता है?
- grid-template-columns: 300px 300px
- repeat(auto-fit, minmax(280px, 1fr))
- float: left
- display: inline
Answer
repeat(auto-fit, minmax(280px, 1fr)) — minmax के साथ auto-fit जगह के अनुसार columns wrap करता है।
अंतिम क्विज़ 5/8
अंतिम क्विज़
त्वरित जाँच: Container queries components को किसके आधार पर style करते हैं?
- The viewport only
- The user agent
- Their container's width
- The page title
Answer
Their container's width — वही component जहाँ रखा जाए वहाँ adapt होता है।
अंतिम क्विज़ 6/8
अंतिम क्विज़
त्वरित जाँच: कौन-सा attribute browsers को screen के अनुसार image size चुनने देता है?
- alt
- rel
- lang
- srcset
Answer
srcset — sizes के साथ srcset browser को सही resolution download करने देता है।
अंतिम क्विज़ 7/8
अंतिम क्विज़
त्वरित जाँच: न्यूनतम touch target size के लिए क्या सुझाया जाता है?
- 44x44px
- 16x16px
- 10x10px
- 24x12px
Answer
44x44px — बड़े targets touch screens पर mis-taps रोकते हैं।
अंतिम क्विज़ 8/8
अंतिम क्विज़
त्वरित जाँच: कौन-सा Core Web Vital अनपेक्षित layout movement मापता है?
- LCP
- CLS
- INP
- TTFB
Answer
CLS — Images और ads width, height या aspect-ratio से जगह आरक्षित करें तो CLS घटता है।