मीडिया क्वेरीज - मोबाइल बनाम डेस्कटॉप ब्राउज़र

Question

मैंने कई साइटें देखी हैं जो डेस्कटॉप ब्राउज़र और मोबाइल फोन ब्राउज़र पर प्रतिक्रियाशील हैं, मैं साइट पर काम कर रहा हूं और मेरे पास निम्न स्टाइलशीट सेटअप है: (हिक्स डिज़ाइन वेबसाइट एक अच्छा उदाहरण है मैं क्या अगर आप एक की जरूरत को प्राप्त करने के)

/* Normal styles go here */ 

@media screen and (min-device-width:321px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:701px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:1025px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:2049px) 
{ 
    /* Styles */ 
} 

हालांकि केवल ऊपर मेरी स्टाइलशीट डेस्कटॉप ब्राउज़र पर काम करने के लिए लगता है चाहता हूँ की। (एंड्रॉइड फ़ायरफ़ॉक्स और सोनी एक्सपीरिया रे पर डिफॉल्ट एंड्रॉइड ब्राउज़र के साथ परीक्षण किया गया)

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

अगर मैं अधिकतम-चौड़ाई के बजाय अधिकतम-उपकरण-चौड़ाई का उपयोग यह मोबाइल ब्राउज़र पर उत्तरदायी हो जाता है, लेकिन नहीं डेस्कटॉप ब्राउज़र ...

मैं निम्न समस्या से बचने के लिए निम्नलिखित की कोशिश की है:

@media screen and (max-width:480px), screen and (max-device-width:480px) 
{ 
    /* Styles */ 
} 

भी

:

@media screen and (max-width:480px), and (max-device-width:480px) 
{ 
    /* Styles */ 
} 

हालांकि मुझे नहीं लगता कि इनमें से कोई भी सही हैं के रूप में Firefox के लिए वेब डेवलपर उपकरण पट्टी इसके बारे में शिकायत। मैंने उपर्युक्त नियमों पर कुछ बदलावों का भी प्रयास किया है लेकिन अभी भी इसे काम नहीं कर सकता है।

मैं क्या समझ अधिकतम-चौड़ाई व्यूपोर्ट चौड़ाई (मान लीजिए .. ब्राउज़र विंडो के व्याप्ति चौड़ाई) और अधिकतम-उपकरण-चौड़ाई स्क्रीन आप साइट को देखने के प्रयोग कर रहे हैं की वास्तविक चौड़ाई पढ़ता पढ़ता से

। - मैं उलझन में हूं कि अधिकतम-चौड़ाई मोबाइल की ब्राउज़र चौड़ाई को क्यों नहीं लगती है।

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

मैं (अधिकतम-चौड़ाई) और (अधिकतम-डिवाइस-चौड़ाई) नियमों को कैसे जोड़ सकता हूं या मैं इसे कैसे प्राप्त कर सकता हूं?

आप बल्कि ऊपर के सभी पढ़ा नहीं हैं तो: (: 480px गुणित अधिकतम-चौड़ाई) हालांकि यह केवल @media स्क्रीन और (अधिकतम-उपकरण-चौड़ाई लगता है:

मैं @media स्क्रीन और उपयोग कर रहा हूँ 480px गुणित) मोबाइल पर काम करता है। मोबाइल और डेस्कटॉप ब्राउज़र पर एक उत्तरदायी डिज़ाइन प्राप्त करने के लिए मैं इन दोनों नियमों को कैसे जोड़ सकता हूं?

Answer 1

वहाँ बाहर मीडिया का एक बहुत हैं, और यदि आप अपने गुणों से ही चयन करना चाहते हैं, all कीवर्ड का उपयोग करें:

@media all and (max-width:480px) 
{ 
    /* Styles */ 
} 

संपादित:

के साथ मिलाएं नियम या:

@media all and (prop1:val1), all and (prop2:val2) 
{ 
    /* Styles */ 
} 

के साथ नियमों कम्बाइन और:

@media all and (prop1:val1) and (prop2:val2) 
{ 
    /* Styles */ 
} 

Answer 2

@media screen and (min-width:240px) and (max-width:480px), 
    screen and (min-device-width:240px) and (max-device-width:480px) 
{ 
    /* Styles */ 
} 

समस्या हल हुई, पिछले उत्तरों ने मुझे वोट दिया। धन्यवाद।