अपनी वेबसाइट को सभी रेजोल्यूशन के लिए फिट बनाएं
अपने लिए वेबसाइट डिजाइन करते वक्त दिमाग में सबसे अहम बात ये होती है कि कैसे इस बात को सुनिश्चित करें कि आपका पन्ना हर तरह के आकार वाले स्क्रीन और डिवाइस पर ठीक से दिखाई दे. यह आप अपने पन्ने पर लाइन ऑफ कोड डालकर कर सकते हैं. इसमें पन्ने की चौड़ाई बताई गई होती है या अधिकतम और न्यूनतम रेजोल्यूशन वैल्यू बताया गया होता है.
इस लेख में हम आपको बेहद संक्षिप्त रूप से बताएंगे कि सभी आकार के स्क्रीन पर आपकी वेबसाइट सही दिखाई दे, इसे आप कैसे सुनिश्चित करें.
सभी स्क्रीन पर फिट होने के लिए अपनी वेबसाइट को एडजस्ट करें
किसी भी पन्ने के रिलेटिव विड्थ यानी सापेक्षिक चौड़ाई को परिभाषित करने का मतलब किसी वेबसाइट को डिजाइन करते समय पेज के आकार को रिकमेंड किया जाता है. पेज को स्क्रीन के किसी भी आकार के अनुसार एडजस्ट किया जा सकता है. चौड़ाई को इकाई अंक में बताने की बजाय प्रतिशत में बताने से हर पन्ने के लिए आप खास आकार बता सकते हैं. यह स्क्रीन के स्पेस के अनुसार बढ़ और घट भी जाता है. i
वेबसाइट के सापेक्षिक आकार को body tags की मदद से परिभाषित किया जाता है. इस टैग को अपनाया जा सकता है यदि आप div # body का इस्तेमाल करते हैं:
body{width:100%;}
इस उदाहरण में कोड बताता है कि आपके वेबसाइट का पन्ना विंडो का 100 फीसदी लेगा, भले स्क्रीन का साइज जो भी है. अब यदि आप चाहते हैं कि आपका पन्ना इससे जरा सा छोटा दिखे तो हम आपको सुझाव देगें कि आप इसकी चौड़ाई को 80 फीसदी से कम सेट करें. हां इसमें आपके कंटेन्ट को स्क्रीन पर थोड़ा छोटा दिखे जाने का खतरा रहेगा. यदि आप चौड़ाई को और कम सेट करते हैं तो आप अपने स्क्रीन को margin: auto का प्रयोग करते हुए फोकस कर सकते हैं.
अधिकतम या न्यूनतम चौड़ाई की विशेषता
minimum या maximum width property का इस्तेमाल हम तब कर सकते हैं जब हम सभी तरह के रेजोल्यूशन के लिए अपनी वेबसाइट को एडजस्ट करेंगे. यहां ये ध्यान रखने की जरूरत है कि न्यूनतम चौड़ाई को इंटरनेट एक्सप्लोरर सपोर्ट नहीं करता है और यह भी ध्यान रखें कि अधिकतम चौड़ाई को सेट करने से भी ये दिखने में भद्दा लग सकता है यदि छोटा पन्ना बड़े स्क्रीन में फिट नहीं होता है तब.
यहां एक उदाहरण है जिसमें वेबसाइट पेज की चौड़ाई को 90 फीसदी, केंद्रित (सेन्टर्ड), 600 पिक्सेल की न्यूनतम चौड़ाई और 2000 पिक्सेल का अधिकतम चौड़ाई सेट किया हुआ है:
body{width:90%;margin:auto;min-width:600px;max-width:2000px}
Image: © Rashad Ashurov - Shutterstock.com
यह भी पढ़ें
- अपनी वेबसाइट को सभी रेजोल्यूशन के लिए फिट बनाएं
- सैमसंग अकाउंट कैसे बनाएं - कैसे करें -इंटरनेट
- कवर लेटर कैसे बनाएं - कैसे करें -ऑफिस सॉफ्टवेयर
- फेसबुक पर पोल कैसे बनाएं - कैसे करें -इंटरनेट
- इंटर्नशिप फाइल कैसे बनाएं -
- लोगो कैसे बनाएं - कैसे करें -इंटरनेट
CCM (in.ccm.net) पर उपलब्ध यह डॉक्युमेंट "अपनी वेबसाइट को सभी रेजोल्यूशन के लिए फिट बनाएं " क्रिएटिव कॉमन लाइसेंस के तहत उपलब्ध कराया गया है. जैसा कि इस नोट में साफ जाहिर है, आप इस पन्ने को लाइसेंस के तहत दी गई शर्तों के मुताबिक संशोधित और कॉपी कर सकते हैं.