पाठ 25 / 25

Responsive design recap

Responsive design के तीन स्तंभों की review करें और कैसे वे adaptable, user-friendly layouts बनाने के लिए एक साथ काम करते हैं।

तीन स्तंभ

1. Flexible grid: Content को flow करने देने के लिए widths के लिए %, em, rem का उपयोग करें। 2. Media queries: विभिन्न viewport sizes पर अलग-अलग rules लागू करें। 3. Flexible media: Images, video, embeds को proportionally scale करें। ये एक साथ 320px mobile screens से 2560px ultra-wide displays तक adapt करने वाले layouts बनाते हैं।

एक complete responsive example

एक practical example में सभी तीन स्तंभ।

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; }
    
    body { font-size: clamp(1rem, 1.5vw, 1.25rem); }
    
    .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); }
    
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
    
    img { max-width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
    
    button { padding: 12px 20px; font-size: 1rem; border: none; border-radius: 8px; cursor: pointer; }
    
    @media (max-width: 600px) {
      .grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Responsive Design</h1>
    <div class="grid">
      <article>
        <img src="image.webp" alt="Example" loading="lazy">
        <h2>Article 1</h2>
        <button>Read More</button>
      </article>
      <!-- More articles -->
    </div>
  </div>
</body>
</html>

त्वरित जाँच: इनमें से कौन responsive design का pillar नहीं है?

  • Percentage widths के साथ flexible grid
  • Breakpoints के लिए media queries
  • Fixed-width containers
  • Flexible, scalable media
Answer

Fixed-width containers — Fixed-width containers layouts को एक आकार पर lock करते हैं — responsive design के opposite। इसके बजाय flexible widths का उपयोग करें।

भविष्य की trends

Container queries, aspect-ratio, और नए media features responsive design को और भी powerful बना रहे हैं।

सीखते रहें

Responsive design लगातार evolve हो रहा है। CSS specs follow करें, नए features को test करें, और user needs के अनुसार adapt करें।

Responsive के बारे में common myths

Myth: Responsive का मतलब mobile version है। Reality: एक codebase, multiple presentations। Myth: Mobile-first का मतलब mobile केवल है। Reality: यह priorities को optimize करता है।

त्वरित जाँच: Mobile-first desktop-first से बेहतर क्यों है?

  • Simpler CSS, prioritization, better performance
  • यह सिर्फ एक trend है
  • Mobile users को features की जरूरत नहीं
Answer

Simpler CSS, prioritization, better performance — Mobile-first CSS cleaner है, और आप complexity को केवल जब जरूरत हो तब add करते हैं।

अगला: advanced patterns को explore करें

अब जब आप responsive fundamentals को समझते हैं, component libraries, design systems, और responsive animation patterns को explore करें।