वैकल्पिक सीएसएस को लोड करने के लिए स्क्रीन रेज़ोल्यूशन का पता लगाना एक अच्छा विचार है?

Question

मैं एक ग्राफिक डिजाइनर के साथ काम कर रहा हूं जो लगातार 960 पिक्सेल की तुलना में वेबसाइटों को बड़ा बनाना चाहता है। मैं तरल लेआउट के साथ एक निश्चित राशि कर सकता हूं लेकिन आईडी वास्तव में बड़े संकल्पों के लिए अलग-अलग सीएसएस लोड करने में सक्षम होना पसंद करती है। मैंने इसे गुमराह किया और नीचे दिया गया लिंक पाया, लेकिन मुझे चिंता है कि मैंने इसके बारे में और अधिक नहीं सुना है। क्या यह एक विश्वसनीय तरीका है? मैं चिंतित हूं क्योंकि मैंने सोचा होगा कि अधिक लोग ऐसा करना चाहते हैं।

http://www.ilovecolors.com.ar/detect-screen-size-css-style/ धन्यवाद

Answer 1

बस अपने प्रश्न का उत्तर देने: नहीं यहां तक ​​कि अगर यह था, यह, कई सीएसएस फ़ाइलों का निर्माण करने आदि संकल्प पर निर्भर की तुलना में बेहतर तरीके हैं अक्षम लगता है।

एक लंबे हवादार उत्तर: जब 960 बन जाता है "ओह, यह 2010 है ..." आपकी कितनी साइटें देखेंगे? इसी समय, हर कोई है कि इंटरनेट ब्राउज़ करता है या तो एक 30 "सिनेमा डिस्प्ले है, या एक दोहरी मॉनिटर सेटअप। मैं सबसे अच्छा समायोजित करने के लिए डिजाइन करने की कोशिश मेरी यातायात।

हालांकि यह ब्राउज़र विंडो का पता लगाने के लिए अच्छा हो सकता है चौड़ाई, और/या स्क्रीन चौड़ाई (मॉनिटर संकल्प), मुझे लगता है कि बहुमत की राय यह है:। आपके संभावित ऑडियंस और डिजाइन पता/इसके लिए निर्माण

एक 960 ग्रिड और CSS का निर्माण, तो एक 1024 ग्रिड का निर्माण और एक सीएसएस = अक्षमता, और बहुत "भविष्य के सबूत" नहीं।

यदि आप अपनी साइट यातायात देख रहे हैं और देखें आपके 9 0% आगंतुक 1 या 2 (या 3) संकल्पों का उपयोग कर रहे हैं, एक तरल लेआउट बनाएं जो उस श्रोताओं के लिए अच्छी तरह से काम करता हो।

फ्लूइड लेआउट शायद बाजार पर डिवाइस, संकल्प, व्यूपोर्ट आकार, स्क्रीन परिभाषाओं (कम, मध्यम, उच्च) की हमेशा-विस्तारित सरणी का सबसे अच्छा सार्वभौमिक समाधान है - अब से 18 महीने अकेले रहने दें।

1. चेकआउट @media प्रश्न तरल लेआउट/डिज़ाइन में जोड़ने के लिए। एक सीएसएस फ़ाइल संशोधित करें (3 नहीं)। http://www.w3.org/TR/css3-mediaqueries/

   @media स्क्रीन और (अधिकतम चौड़ाई: 960 पीएक्स) { एच 1, एच 2 {रंग: # 990000; font-size: 1.4em; } }

   @media स्क्रीन और (अधिकतम चौड़ाई: 1280 पीएक्स) { एच 1, एच 2 {रंग: # 336699; font-size: 1.8em; } }

2. अपने सीएसएस (या किसी ऐसे ही तर्क) को min- and max- widths जोड़े भी प्रस्तावों/ब्राउज़र आकारों की एक व्यापक रेंज को संतुष्ट है, साथ ही अपने डिजाइन एक लंबे समय तक शैल्फ जीवन मिल सकता है। और किसी दस्तावेज़.विंडो.विड्थ() फ़ंक्शन पर पर भरोसा नहीं करता है।

अपनी हिरन के लिए सबसे अधिक धक्का पाएं। कुछ अंतराल को पुल करने में मदद करने के लिए द्रव डिजाइन, @media प्रश्न, जावास्क्रिप्ट। आप कम कोड, एक और "भविष्य के सबूत" डिजाइन, और संतुष्ट आगंतुकों का एक बड़ा प्रतिशत के साथ खत्म हो जाएगा।