मोबाइल डिज़ाइन के लिए मीडिया क्वेरीज़ का उपयोग करने का सबसे अच्छा तरीका

Question

मुझे पता है कि मीडिया प्रश्न क्या हैं और उनका उपयोग क्यों किया जाता है, लेकिन मुझे यकीन नहीं है कि उनके साथ मोबाइल साइट विकसित करने का सबसे अच्छा तरीका कैसा है।

उदाहरण: मेरे पास mysite.com है जिसमें सभी आवश्यक शैलियों के साथ स्टाइल शीट है (मान लीजिए कि यह एक बहुत बड़ी फाइल है)। इस बिंदु पर, मेरी कोई भी शैली निम्न स्क्रीन संकल्प या अन्य उपकरणों को लक्षित नहीं करती है।

तब मैं अपनी साइट का मोबाइल संस्करण बनाने का निर्णय लेता हूं। इसे आसान बनाने के लिए, मैं अभी केवल आईफोन उपयोगकर्ताओं को लक्षित करूंगा, और अगर कोड किसी को आईफोन पर मेरी साइट पर जाता है, तो उन्हें मोबाइल संस्करण मिलता है।

मेरा प्रश्न: इन अतिरिक्त शैलियों को शामिल करने के लिए सबसे अच्छी जगह कहां है, ताकि उपयोगकर्ता मोबाइल संस्करण देख सके? क्या मुझे इन शैलियों को मूल स्टाइल शीट में शामिल करना चाहिए, या बेहतर होगा अगर मैं उन्हें अपनी स्टाइल शीट में अलग कर दूं?

कहें कि मेरी साइट पूरी तरह से फ्लोट के साथ बनाई गई है, लेकिन मेरा मोबाइल संस्करण सिर्फ एक दूसरे के शीर्ष पर रखे गए प्रत्येक तत्व को दिखाएगा। मैं मीडिया प्रश्नों का उपयोग करके कैसे दिखा सकता हूं? क्या यह फ्लोट घोषित करने जितना आसान है: कोई नहीं; या कुछ और?

असल में, मैं ऊपर दिए गए अनुच्छेद में क्या पूछने की कोशिश कर रहा हूं, मैं अपनी स्टाइल शीट कैसे बना सकता हूं, उदाहरण के लिए, मूल रंग और शायद लिंक की स्थिति या डेस्कटॉप संस्करण में जो कुछ भी हो, डेस्कटॉप में संस्करण लेकिन मोबाइल संस्करण में एक-दूसरे के ऊपर सबकुछ ढेर करने जैसे मतभेदों के साथ?

क्या स्टाइल शीट के मीडिया क्वेरी सेक्शन में नियम मूल रूप से 'ओवर-राइडिंग' हैं जो आपने गैर मीडिया क्वेरी अनुभागों में घोषित किया है?

मुझे मीडिया प्रश्नों का उपयोग करने के कई उदाहरण मिल गए हैं, लेकिन मुझे पूरी साइट का एक कामकाजी उदाहरण नहीं मिल रहा है। यदि मेरे पास एक ही HTML पृष्ठ में एक मोबाइल.css और main.css लिंक है, तो वे मोबाइल संस्करण में मेरी साइट के कुछ पहलुओं को बनाए रखने के लिए कैसे काम करते हैं लेकिन दूसरों को बदलते हैं?

अंतिम प्रश्न: क्या एक पूरी तरह से तय चौड़ाई डिजाइन होना संभव है, लेकिन फिर भी मीडिया प्रश्नों का उपयोग करना संभव है? कोड तब भी पता लगा पाएगा जब ब्राउज़र एक निश्चित चौड़ाई/ऊंचाई से पहले छोटा हो या फैलता है, सही?

लंबे और शायद भ्रमित प्रश्न के लिए खेद है। मुझे उम्मीद है कि आप बता सकते हैं कि मैं क्या पूछने की कोशिश कर रहा हूं।

Answer 1

वहाँ (! कम से कम) चार यह करने के लिए तरीके हैं: तल पर

1. सामान्य सीएसएस, मीडिया क्वेरी के साथ (ताकि वे ऊपर सीएसएस ओवरराइड)
2. दो (या अधिक) सीएसएस फ़ाइलें
3. सर्वर साइड का पता लगाने कि
4. सर्वर साइड का पता लगाने तो एक रीडायरेक्ट m.example.com के लिए, या example.com/mobile

HTML में विभिन्न सीएसएस लिंक जोड़ता है लिंक तत्व पर मीडिया के प्रश्नों का उपयोग कर भरी हुई

यदि आप मामूली परिवर्तन (फ्लोट: कोई नहीं, अलग-अलग फ़ॉन्ट आकार इत्यादि) बोल रहे हैं तो मैं 1. के लिए जाऊंगा यदि सीएसएस में बहुत सारे बदलाव और बहुत सारे बदलाव हैं, तो मैं 2 या 3 (3 isn उतना अच्छा नहीं है, क्योंकि आप स्क्रीन गुणों की बजाय उपयोगकर्ता पर भरोसा करते हैं)। यदि एचटीएमएल और सीएसएस बदलते हैं, तो मैं 4.

इन सभी के लिए, इंटरनेट एक्सप्लोरर 6-8 में अपना काम जांचें, वे मीडिया प्रश्नों को अनदेखा कर सकते हैं और मोबाइल सीट सहित सभी सीएसएस का उपयोग कर सकते हैं, 1 का उपयोग करें।https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

Answer 2

मैं विकल्प 3.

उपयोगकर्ता का पता लगाने के सूँघने एजेंट की सिफारिश करेंगे:

1 और 2

यहाँ का उपयोग कर साइटों के कुछ उदाहरण के लिए http://mediaqueri.es/ पर एक नज़र डालें एक और संसाधन है कि मदद कर सकता है है डिवाइस खराब नहीं है। यह अब वर्षों से मोबाइल वेबसाइट बनाने के लिए निरंतर रहा है। PHP device detection का उपयोग करके, आपके पास विभिन्न डिवाइसों पर आपकी साइट का अधिक नियंत्रण है। न केवल आप चुन सकते हैं कि कौन सी सीएसएस फाइलें आप डिवाइस पर जाते हैं, यह भी चुन सकते हैं कि प्रति डिवाइस श्रेणी में कौन सी संपत्ति/मार्क-अप लोड हो जाता है; मोबाइल, टैबलेट, डेस्कटॉप, टीवी, आदि

इस विधि के साथ, आप सुनिश्चित कर सकते हैं कि मोबाइल डेस्कटॉप संपत्ति/शैलियों/मार्कअप प्राप्त नहीं कर रहे हैं और इसके विपरीत, जावास्क्रिप्ट अक्षम होने पर भी।

Answer 3

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

प्लेस <meta name="viewport" content="width=device-width"/> अपने शीर्षक में, और अपने सीएसएस फ़ाइल में एक डेस्कटॉप संस्करण और एक मोबाइल संस्करण में आने से पार्स:

/* Desktop Version */ 

@media screen { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
} 

/* SmartPhone Version */ 

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/m_bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
} 

Answer 4

मैं विकल्प 3. की ​​सिफारिश नहीं होगा सूँघने एक बुरा विकल्प बार साबित हो चुका है फिर। क्या होता है जब कोई उपकरण/ब्राउज़र गलत जानकारी प्रस्तुत करता है? यह आसानी से अपहरण कर लिया गया है।

ऐसा मत करें। मीडिया क्वेरी सभी तरह से। यह समर्थित मानक है।