CSS Responsive — हर screen पर अच्छा पेज

आपके visitors सब एक ही screen इस्तेमाल नहीं करेंगे। कुछ आपकी साइट चौड़े desktop monitor पर खोलेंगे, कुछ laptop पर, और कई एक हाथ में पकड़े phone पर। Responsive पेज वह है जो इन सब पर अच्छा दिखे — वही पेज, वही content, लेकिन लेआउट उस screen के हिसाब से मुड़ जाए जिस पर वह खुला है।

Diagram — देखें, यह सब कैसे जुड़ता है

इसका मुख्य औज़ार media query है: एक नियम जो कहता है "यह CSS सिर्फ तब लागू करो जब screen इतनी चौड़ी या इससे छोटी हो"। कुछ media queries से desktop पर तीन कॉलम phone पर एक कॉलम बन जाते हैं, और बड़ी heading छोटी हो जाती है।

Viewport tag — पहला कदम

Phone पर किसी media query के सही से काम करने से पहले, पेज के <head> में एक लाइन चाहिए। इसके बिना phone खुद को चौड़ा desktop screen समझकर पूरे पेज को छोटा करके दिखाता है, जिससे छोटे-छोटे अक्षर बन जाते हैं जिन्हें पढ़ने के लिए visitor को pinch करके zoom करना पड़ता है। Viewport tag phone को अपनी असली चौड़ाई इस्तेमाल करने के लिए कहता है।

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media queries — अलग screen के लिए अलग नियम

Media query @media और एक शर्त से शुरू होती है, आमतौर पर max-width। उसके अंदर का CSS सिर्फ तब लागू होता है जब screen उतनी चौड़ी या उससे छोटी हो। आम तरीका है पहले desktop लेआउट लिखना, फिर एक media query जोड़ना जो छोटी screens के लिए उसे बदल दे।

Syntax — तीन कॉलम एक हो जाते हैं

.columns { display: flex; gap: 20px; }
.column { flex: 1; padding: 15px; }

@media (max-width: 600px) {
  .columns { flex-direction: column; }
}

चौड़ी screen पर तीनों कॉलम बगल-बगल बैठते हैं। जब screen 600px या उससे छोटी होती है, तो media query flex direction को column में बदल देती है और वही तीनों boxes एक के ऊपर एक लग जाते हैं — न बगल में scrolling, न छोटे अक्षर।

Flexible images और text

दो और आदतें पेज को responsive बनाती हैं। पहली, तस्वीरें अपने container से कभी चौड़ी नहीं होनी चाहिए: max-width: 100% और height: auto से बड़ी photo अपना आकार बनाए रखते हुए phone screen पर फिट होने के लिए सिकुड़ जाती है। दूसरी, fixed pixel चौड़ाई की बजाय लचीली चौड़ाई इस्तेमाल करें — percentages और fr units — ताकि लेआउट साँस ले सके।

आम गलतियाँ

• Viewport tag भूल जाना — phone पूरे desktop पेज को छोटा करके दिखाता है और कुछ भी सही नहीं दिखता।
• Main container के लिए width: 900px जैसी fixed pixel चौड़ाई इस्तेमाल करना — पेज phone पर बाहर निकल जाता है। इसकी बजाय max-width इस्तेमाल करें।
• तस्वीरों पर max-width: 100% भूल जाना — चौड़ी photo पेज को screen से चौड़ा कर देती है और बगल में scrolling होने लगती है।
• Media query लिखकर सिर्फ desktop browser पर test करना — असली phone पर भी ज़रूर जाँचें, जहाँ viewport tag मायने रखता है।
• 600px जैसा breakpoint चुनकर बीच के sizes को कभी न जाँचना — सिर्फ एक चौड़ाई पर नहीं, कुछ अलग-अलग चौड़ाइयों पर test करें।

याद रखें

• Responsive का मतलब है वही पेज हर screen पर फिट हो — desktop, laptop और phone।
• <head> में viewport tag जोड़ें, नहीं तो phone पूरे पेज को छोटा करके दिखाएगा।
• Media query CSS को सिर्फ तब लागू करती है जब उसकी शर्त सही हो, जैसे @media (max-width: 600px)।
• तस्वीरों को सुरक्षित सिकुड़ने के लिए max-width: 100% और height: auto चाहिए।
• Mobile-first का मतलब है पहले छोटी screen के लिए design करना, फिर बड़ी screens के लिए नियम जोड़ना।

याद रखने की तरकीब: पहले छोटी screen, फिर बड़ी — mobile-first सोचो, जगह बढ़ाना आसान है, सिकोड़ना मुश्किल।

उदाहरण समझिए

• <meta name="viewport" ...> — head में यह line phone को अपनी असली screen चौड़ाई इस्तेमाल करने के लिए कहती है, ताकि media query असली device पर सही काम करे।
• .columns { display: flex; } — चौड़ी screen पर तीनों boxes पंक्ति में बगल-बगल बैठते हैं, हर एक को flex: 1 से बराबर हिस्सा मिलता है।
• @media (max-width: 600px) — जब screen 600px या उससे छोटी होती है, तो इस block के अंदर के नियम लागू हो जाते हैं।
• flex-direction: column — media query के अंदर पंक्ति कॉलम बन जाती है, इसलिए phone पर तीनों boxes एक के ऊपर एक लग जाते हैं।
• img { max-width: 100%; height: auto; } — photo छोटी screen पर बाहर निकलने की बजाय अपने box में फिट होने के लिए सिकुड़ जाती है।