सीएसएस मीडिया प्रश्न न्यूनतम चौड़ाई और न्यूनतम डिवाइस-चौड़ाई विरोधाभासी?

Question

मैं मीडिया प्रश्नों की दुनिया के लिए बहुत नया हूं, और यह स्पष्ट है कि चौड़ाई और डिवाइस-चौड़ाई के बीच अंतर के बारे में कुछ मौलिक है - उनकी स्पष्ट लक्ष्यीकरण क्षमताओं के अलावा।

मैं एक ही ब्रेकपॉइंट्स के साथ नियमित कंप्यूटर और उपकरणों दोनों को लक्षित करना चाहता हूं, इसलिए मैंने अपने सभी मिनट & न्यूनतम चौड़ाई क्वेरी को मिनी-डिवाइस और अधिकतम-डिवाइस चौड़ाई क्वेरी पर डुप्लिकेट किया। किसी भी कारण से, जब मैं -device समकक्ष जोड़ता हूं, तो मेरे सीएसएस को नियमित कंप्यूटरों द्वारा बहुत अलग तरीके से व्याख्या किया जाता है, और मुझे यकीन नहीं है कि मैं क्या गलत कर रहा हूं।

You can see the effects here

And here (मेरी प्रश्नों का -device-चौड़ाई को जोड़ने के बाद, मेरे सीएसएस अप छोटी से छोटी चौड़ाई में खराब हो जाता है (यह क्या यह की तरह दिखना चाहिए है) - बड़े प्रस्तावों में देखा जाता है, तब भी जब ब्राउज़र बुलाया जा रहा है की तुलना में चौड़ाई छोटा है)।

यहां मेरे सीएसएस लिंक हैं - क्या मेरे वाक्यविन्यास में कुछ गड़बड़ है? :

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css"> 
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css"> 
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css"> 


<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css"> 
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css"> 
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css"> 

Answer 1

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

जब तक आप शैली संकल्प और नहीं व्यूपोर्ट के आकार के आधार पर चादरें प्रतिबंधित करने के लिए एक वैध कारण है, तो बस min-width/max-width का उपयोग करें और min-device-width/max-device-width से बचें।