सीएसएस या जावास्क्रिप्ट का उपयोग करके उत्तरदायी वेब डिज़ाइन?

Question

मैं एक ऐसी वेबसाइट बनाने जा रहा हूं जो उत्तरदायी डिज़ाइन का उपयोग कर रहा हो। मैंने सीएसएस मीडिया क्वेरी के बारे में कुछ जानकारी पढ़ी। मैं क्या करना चाहता हूं कि मेरे वेबपृष्ठ का लेआउट विभिन्न उपकरणों (जैसे पीसी, टैबलेट या स्मार्टफोन) का उपयोग करके अंतर दिखाना चाहिए।

यदि मैं स्क्रीन की चौड़ाई (पिक्सेल में) का उपयोग कर डिवाइस को निर्धारित करने के लिए मीडिया क्वेरी का उपयोग करता हूं, तो मुझे हमेशा चिंता है कि अत्यधिक उच्च पीपीआई स्क्रीन का उपयोग करके कोई नया डिवाइस होगा या नहीं। उस डिवाइस को टैबलेट या पीसी की तरह कुछ खतरा हो सकता है?

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

कोई भी अच्छा समाधान जो मेरी चिंताओं को हल कर सकता है? या कौन सा समाधान बेहतर है?

या मैं मीडिया क्वेरी का उपयोग करने की विधि को गलत समझता हूं?

धन्यवाद।

Answer 1

सीएसएस जाने का तरीका है, और आप हमेशा ऐसे ब्राउज़र के लिए फ़ॉलबैक प्रदान कर सकते हैं जो css3mediaqueries.js जैसे जेएस प्लगइन का उपयोग करके मीडिया प्रश्नों का समर्थन नहीं करते हैं, लेकिन पूरी तरह से जेएस पर निर्भर करते हुए आपकी वेबसाइट को उत्तरदायी बनाने का जोखिम है क्योंकि आप ' टी यह सुनिश्चित करने के लिए बताएं कि क्या उपयोगकर्ता जावास्क्रिप्ट सक्षम होगा, और जब यह सक्षम नहीं है, तो यह अब उत्तरदायी नहीं होगा।

इसके अलावा, अब यह सुनिश्चित करने के लिए कि आपकी वेबसाइट हमेशा सही स्केल करती है, em मीडिया क्वेरी के लिए मानों के लिए मानों का उपयोग करने के लिए सर्वोत्तम अभ्यास माना जाता है। this article में इस विषय पर अधिक।

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

आशा है कि मदद की :)

Answer 2

आईडी 'व्यक्तिगत रूप से सीएसएस का उपयोग करें और न्यूनतम चौड़ाई और अधिकतम चौड़ाई सेट करें। अधिकांश उत्तरदायी डिजाइन अब दिन सीएसएस का उपयोग करते हैं। इस तरह यदि बाजार पर कोई नया डिवाइस है तो यह सिर्फ स्क्रीन के आकार के अनुसार समायोजित होगा।

@media screen and (max-width:480px) { } 
@media screen and (min-width:481px) {) etc... etccc.... 

Answer 3

मैं ऐसे विभिन्न उपकरणों के लिए CSS3 के मीडिया के प्रश्नों का उपयोग करने पर Twtitter Bootstrap पसंद करते हैं।

Answer 4

मैं उपयोग मीडिया सीएसएस में प्रश्नों पसंद करते हैं। बस लिखने प्रश्नों डिफ़ॉल्ट सीएसएस के बाद ...

@media स्क्रीन और (अधिकतम-चौड़ाई: 600px) {यहाँ लिखने केवल तत्वों को उत्तरदायी प्रदर्शन के लिए डी कोड में परिवर्तन करना होगा}

.logo { 
width: 200px; 
height: 80px; 
background: url... ; 
background-size: 100%; 
margin: 0; 
} 

@media screen and (max-width: 600px) { 
.logo { 
width: 150px; 
height: 60px; 
margin: 0 auto; 
} 
} 

व्यूपोर्ट कोड को हेड/एचटीएमएल में डालना न भूलें।

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" /> 

Answer 5

jRWD, एक JavaScript केवल मॉड्यूल मैं हाल ही में तैयार किया गया है की कोशिश करो। यह शुद्ध जावास्क्रिप्ट की 12 लाइनों और 2 छोटे सहायक कार्यों का उपयोग करता है।यह गिटहब पर https://github.com/BlackMagic/jRWD पर उपलब्ध है।

यदि आप कार्रवाई में जेआरडब्ल्यूडी देखना चाहते हैं, तो http://ieee-qld.org पर जाएं। सुनिश्चित करें कि आप स्रोत कोड का निरीक्षण करते हैं। न्यूनतम जावास्क्रिप्ट, न्यूनतम सीएसएस स्टाइलशीट। कोई jQuery नहीं।