पाठ 1 / 25

उत्तरदायी डिज़ाइन क्या है?

ऐसा डिज़ाइन जो लचीले घटकों और स्मार्ट सीमाओं का उपयोग करके किसी भी स्क्रीन आकार पर बहता और अनुकूलित होता है।

उत्तरदायी बनाम स्थिर

स्थिर लेआउट content को एक चौड़ाई पर lock करते हैं (जैसे, 960px)। उत्तरदायी लेआउट अनुकूल होते हैं: content reflows होता है, images scale होती हैं, और components स्क्रीन आकार के आधार पर फिर से व्यवस्थित होते हैं। उत्तरदायी आधुनिक है — यह 50%+ web traffic को मोबाइल पर serve करता है।

उत्तरदायी डिज़ाइन के तीन स्तंभ

  1. लचीली grid — fixed pixels की जगह proportional widths (%, em, rem)। 2. Media queries — प्रत्येक breakpoint पर अलग CSS नियम लागू करें। 3. लचीला media — images, video, और embeds जो अपने container के साथ scale होते हैं।

मोबाइल-प्रथम डिफ़ॉल्ट है

पहले मोबाइल के लिए CSS लिखें (सबसे छोटी स्क्रीन), फिर बड़ी स्क्रीन के लिए enhance करने के लिए media queries का उपयोग करें। यह दृष्टिकोण सरल है, तेजी से load होता है, और आवश्यक content को प्राथमिकता देता है।

एक उत्तरदायी blueprint

यह HTML structure किसी भी स्क्रीन पर सिर्फ CSS के साथ काम करता है — अभी कोई layout framework की जरूरत नहीं है।

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font-family: sans-serif; }
      .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px; }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Mobile-first responsive layout</h1>
    </div>
  </body>
</html>

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

  • Flexible grid
  • Fixed widths केवल
  • Desktop-first approach
Answer

Flexible grid — %, em, rem का उपयोग करके flexible grid एक core pillar है।

Responsive design optional नहीं है

Mobile अब अधिकांश users के लिए primary device है। Responsive design 'nice to have' नहीं है—यह essential है।