Respond.js

Question

के साथ आधुनिकizr मैं उत्तरदायी डिजाइन के लिए Modernizr और Respond.js का उपयोग करने के लिए सबसे अच्छा तरीका का आकलन कर रहा हूं और समुदाय के लिए कुछ प्रश्न हैं।

सबसे पहले, यह मेरी समझ है कि जब Respond.js के साथ Modernizr को बंडल करते हैं, तो IE8 और नीचे मीडिया क्वेरी समर्थन के लिए कोई अन्य कोडिंग या परीक्षण आवश्यक नहीं है। दूसरे शब्दों में, जब Respond.js को Modernizr के साथ बंडल किया गया है, तो मुझे केवल प्रतिक्रिया स्रोत प्राप्त करने के लिए अपने स्रोत में Modernizr लोड करना होगा। सही बात?

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

तीसरा, अगर मैं दो स्क्रिप्ट को अलग करना चाहता हूं, तो आपको क्या लगता है कि यदि आवश्यक हो तो Respond.js को लोड करने का सबसे अच्छा तरीका क्या है? जवाब देने के लिए एक विकल्प आईई विशिष्ट सशर्त टिप्पणी का उपयोग करना होगा। मीडिया प्रश्न समर्थन और भार के परीक्षण के लिए Yepnope और Modernizr का उपयोग करने का एक और विकल्प है यदि आवश्यक हो तो प्रतिक्रिया दें। जो अधिक कुशल और गलती-सबूत होगा।

अंत में, यदि मैं दो लिपियों अलग और प्रतिसाद लोड करने के लिए यदि आवश्यक हो तो मैं दो निम्न तकनीक का सामना करना पड़ा Modernizr का उपयोग करना चुनते:

<script> 
     yepnope({ 
    test : Modernizr.mq('(only all)'), 
    nope : ['js/libs/respond.min.js'] 
}); 
</script> 

या

<script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script> 

मैं ने पाया है कि दूसरा आईई 8 दुर्घटनाग्रस्त है, लेकिन सिर्फ पुनः लिखने की आवश्यकता है। आप किस तकनीक की सिफारिश करेंगे?

सभी मदद के लिए धन्यवाद।

Answer 1

सबसे पहले, यह मेरी समझ है कि जब Respond.js के साथ Modernizr को बंडल करते हैं, तो IE8 और नीचे मीडिया क्वेरी समर्थन के लिए कोई अन्य कोडिंग या परीक्षण आवश्यक नहीं है। दूसरे शब्दों में, जब Respond.js को Modernizr के साथ बंडल किया गया है, तो मुझे केवल प्रतिक्रिया स्रोत प्राप्त करने के लिए अपने स्रोत में Modernizr लोड करना होगा। सही बात?

अच्छी तरह से आपको शुरू करने के लिए कम से कम कुछ CSS3 मीडिया प्रश्नों की आवश्यकता है। Respond.js अनिवार्य रूप से ब्राउज़र के लिए मीडिया प्रश्नों का एक जावास्क्रिप्ट कार्यान्वयन है जो उनका समर्थन नहीं करता है (उदाहरण के लिए IE 8 से कम)। बस सुनिश्चित करें कि Respond.js का संदर्भ आपके CSS3 मीडिया प्रश्नों के बाद आता है (link)।

तो, हां, मान लीजिए कि आपके पास कस्टम बिल्ड या जो भी हो, से Modernizr के साथ बंडल किया गया है, और यह आपके CSS3 के बाद लोड हो गया है, तो आप सभी अच्छे हैं। इसके अलावा, Modernizr (link)

दूसरी बात अपने HTML के में कुछ और विन्यास की जरूरत है, यदि आपको लगता है कि यह सबसे कारगर तरीका IE8 में और नीचे मीडिया क्वेरी के लिए समर्थन प्राप्त करने के लिए है? संक्षेप में, मैं उन ब्राउज़रों के लिए आवश्यक एक आधुनिक मॉडर्निज़ स्क्रिप्ट भी शामिल करूंगा जो पहले से ही मीडिया प्रश्नों का समर्थन करता है। क्या मीडिया स्क्रिप्ट्स के लिए कोई परीक्षण विफल होने पर दो स्क्रिप्ट को अलग करने और केवल Respond.js लोड करने के लिए और अधिक कुशल नहीं होगा?

मॉड्यूलर doesn't come with support for browsers without media queries बॉक्स से बाहर। आपको इसे कस्टम निर्माण में जोड़ना होगा। तो, हाँ, मुझे लगता है कि हमेशा जवाब शामिल करना स्मार्ट है। छोटा, पुस्तकालय केवल 3kb से थोड़ा अधिक जोड़ता है, और इसे Modernizr फ़ाइल में शामिल करने से कोई अन्य GET अनुरोध नहीं जोड़ा जाएगा। मैं कहूंगा कि सबकुछ तैयार करने के लिए इसे वहां छोड़ दें।

तीसरा, मैं आधुनिकता विधि के साथ जाऊंगा। मुझे नई चीजें का उपयोग करना पसंद है, वह अतिरिक्त जावास्क्रिप्ट रास्ते में आता है।

Answer 2

प्रतिक्रिया के नए संस्करण में कुछ फीचर परीक्षण शामिल हैं, इसलिए आपको आधुनिकता या Yepnope की आवश्यकता नहीं है!

यहाँ संशोधन है: https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

मुख्य respond.js समारोह से बाहर से शामिल window.matchMedia polyfill। इस पॉलीफिल के लिए स्रोत कोड यहां https://github.com/paulirish/matchMedia.js है, और इसमें आउट-ऑफ-द-बॉक्स समेत अद्यतन रखने के लिए चीजों को आसान बना देगा, और उन लोगों के लिए छोटी फ़ाइल संपीड़न की अनुमति देगा जो पहले से ही आधुनिकज़र के माध्यम से या अन्यथा (यदि आप हैं, तो आप कर सकते हैं Respond.js से इसे हटाएं)।

इसके अलावा, आपको ध्यान रखना चाहिए कि yepnope.js का उपयोग करने से देरी हो सकती है जिसमें मीडिया क्वेरी शैलियों को पार्स और लागू करने से पहले आप गैर-मीडिया क्वेरी शैलियों को देखते हैं। अनुशंसा यह है कि आप जितना संभव हो सके इससे बचने के लिए हेडर में respond.js डालते हैं, हालांकि, अपने जेएस फ़ाइलों को आपके लिए पाद लेख में रखना भी अच्छा है।

Answer 3

सुविधा का परीक्षण नए lib में हो सकता है tkane2000 कहते हैं की तरह ... बस आप शायद बहुत Modernizr के माध्यम से ऐसा कर सकता है उल्लेख करना चाहता था:

<script> 
    Modernizr.load({ 
    test: Modernizr.mq('only all'), 
    nope: 'js/respond.min.js' 
    }); 
    </script> 

मूल पोस्टर मुझे लगता है कि अवैध मीडिया क्वेरी की जांच है '(केवल सब) '... कुछ चीजों के आधार पर कोई भी संश्लेषण नहीं होना चाहिए। एक बार मैंने माता-पिता को हटा दिए, respond.js उचित रूप से शामिल किया गया प्रतीत होता है।