# Responsive design recap — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन Source: https://www.geekswithgeeks.com/hi/responsive-design/responsive-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 में सभी तीन स्तंभ। ```html

Responsive Design

Example

Article 1

``` **Quiz:** इनमें से कौन responsive design का pillar नहीं है? - [ ] Percentage widths के साथ flexible grid - [ ] Breakpoints के लिए media queries - [x] 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 करता है। **Quiz:** Mobile-first desktop-first से बेहतर क्यों है? - [x] 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 करें।