विभिन्न स्क्रीनों के लिए CSS लेआउट का परिचय

आधुनिक दुनिया में, एक वेबसाइट को विभिन्न आकार की स्क्रीन वाले उपकरणों पर अच्छी तरह से दिखना चाहिए।

आमतौर पर उपकरणों को चार वर्गों में विभाजित किया जाता है: कंप्यूटर (desktop), लैपटॉप, टैबलेट (tablet) और फोन (mobile)।

पहले, पुराने जमाने में, सभी उपकरणों के लोकप्रिय स्क्रीन आकार ज्ञात थे, क्योंकि उनमें से इतने भी नहीं थे। और वेबसाइटें ऐसी बनाई जाती थीं कि वे ज्ञात रिज़ॉल्यूशन की सूची पर सही ढंग से दिखें।

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

यह लेआउट के महत्वपूर्ण बिंदुओं पर ब्लॉकों के पुनर्व्यवस्थित होने से प्राप्त किया जाता है। इसके लिए ये महत्वपूर्ण बिंदु किसी विशेष उपकरण के लिए नहीं, बल्कि साइट की सामग्री के अनुसार चुने जाते हैं - ताकि वह अच्छी दिखे।

महत्वपूर्ण बिंदुओं के बीच, साइट के तत्वों की चौड़ाई परिवर्तनशील होनी चाहिए, ताकि यह स्क्रीन की चौड़ाई के अनुसार ढल जाए। और महत्वपूर्ण बिंदुओं पर ब्लॉक दूसरी स्थितियों में पुनर्व्यवस्थित हो जाते हैं।

वर्णित लेआउट को अनुक्रियाशील या उत्तरदायी (responsive) कहा जाता है। इसका अध्ययन हम अगले पाठों में करेंगे।