सभी संकल्पों को पूरा करने के लिए अपनी वेबसाइट को समायोजित करें

वेबसाइट डिजाइन करते समय, ध्यान रखने वाली सबसे महत्वपूर्ण चीजों में से एक यह सुनिश्चित करना है कि आपका पृष्ठ सभी आकारों के स्क्रीन और उपकरणों पर सही ढंग से दिखाई दे। यह आपके पृष्ठ में कोड की एक पंक्ति सम्मिलित करके किया जा सकता है जो पृष्ठ की सापेक्ष चौड़ाई को परिभाषित करता है या न्यूनतम और अधिकतम रिज़ॉल्यूशन मान प्रदान करता है।

यह त्वरित लेख आपको यह सुनिश्चित करने के लिए सुझाव देगा कि आपकी वेबसाइट सभी आकारों की स्क्रीन पर ठीक से कैसे दिखाई दे ।

सभी स्क्रीन को फिट करने के लिए अपनी वेबसाइट को समायोजित करें

पृष्ठ की किसी भी आकार की स्क्रीन को समायोजित करने की क्षमता के कारण वेबपेज डिजाइन की बात आने पर पृष्ठ की सापेक्ष चौड़ाई को परिभाषित करना अनुशंसित तरीका है। इकाई संख्या के विपरीत प्रतिशत में चौड़ाई को परिभाषित करते हुए, आप पृष्ठ के प्रत्येक टुकड़े के लिए एक निश्चित मात्रा में लचीलेपन का निर्माण करते हैं, जिससे यह दर्शकों के स्क्रीन स्पेक्स के आधार पर बढ़ने या सिकुड़ने की अनुमति देता है।

वेबसाइट की सापेक्ष चौड़ाई की परिभाषा बॉडी टैग के माध्यम से की जाती है। यदि आप div # बॉडी का उपयोग करते हैं तो इस टैग को अनुकूलित किया जा सकता है :

 शरीर {चौड़ाई: 100%;} 

इस उदाहरण में, कोड तय करता है कि आपकी वेबसाइट का पृष्ठ विंडो का 100% हिस्सा लेगा, चाहे स्क्रीन के आकार को देखें। यदि आप चाहते हैं कि आपका पृष्ठ थोड़ा छोटा दिखाई दे, तो हम आपकी चौड़ाई 80% से कम करने की सलाह देते हैं, या आप जोखिम उठाते हैं कि आपकी सामग्री ऑन-स्क्रीन बहुत छोटी दिखाई देगी। यदि आप एक छोटी चौड़ाई को परिभाषित करते हैं, तो आप मार्जिन: ऑटो का उपयोग करके अपनी स्क्रीन को फोकस कर सकते हैं।

न्यूनतम या अधिकतम चौड़ाई संपत्ति

सभी प्रकार के संकल्प को फिट करने के लिए वेबसाइट को समायोजित करते समय न्यूनतम या अधिकतम चौड़ाई की संपत्ति का उपयोग भी किया जा सकता है। हालांकि, यह नोट करना महत्वपूर्ण है कि इंटरनेट एक्सप्लोरर में एक न्यूनतम चौड़ाई का समर्थन नहीं किया जाता है, और यह कि अधिकतम चौड़ाई निर्धारित करने पर विकृत प्रस्तुति हो सकती है यदि एक छोटा पृष्ठ बड़े स्क्रीन पर फिट नहीं होता है।

यहां एक वेबसाइट का उदाहरण दिया गया है, जिसमें 90% की एक पृष्ठ चौड़ाई है, जो 600 पिक्सेल की न्यूनतम चौड़ाई और 2000 पिक्सेल की अधिकतम चौड़ाई के साथ केंद्रित है:

 शरीर {चौड़ाई: 90%; मार्जिन: ऑटो; न्यूनतम-चौड़ाई: 600px; अधिकतम-चौड़ाई: 2000px}