मेरे CSS3 मीडिया प्रश्न क्यों काम नहीं कर रहे हैं?

Question

Style.css में, मैं मीडिया क्वेरीज़ का उपयोग कर रहा हूँ, जिनमें से दोनों में भिन्नता है:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

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

क्या कोई मुझे सही दिशा दिखा सकता है?

Comments

क्या मोबाइल फोन है? मीडिया क्वेरी सीएसएस में एक नई सुविधा है, सभी मोबाइल फोन ब्राउज़र इसका समर्थन नहीं करते हैं ...

— स्पार्की

iPhone 4 और मैं 320 x 480 रिज़ॉल्यूशन के साथ एक एंड्रॉइड फोन (2.2 Froyo) पर भी परीक्षण कर रहा हूं।

— redconservatory

वास्तव में मैंने iPhone 4 पर निम्न मीडिया क्वेरी पर स्विच किया और यह काम करता है (लेकिन मुझे उच्च रिज़ॉल्यूशन को समायोजित करने के लिए अपने CSS को बदलना होगा) @media केवल स्क्रीन और (-webkit-min-device-pixel-ratio: 2) {}

— redconservatory

मुझे आखिरकार एहसास हुआ कि मैं गायब pxथा @media (max-width: 320px)।

— रयान

मेरे मामले में, यह क्रोम डेवलपर कंसोल की वजह से खुला था इसलिए ऊँचाई वह नहीं थी जो मैं सोच रहा था

— Rabolf

Answer 1

ये तीनों उपयोगी सुझाव थे, लेकिन ऐसा लगता है कि मुझे मेटा टैग जोड़ने की आवश्यकता है:

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

अब यह एंड्रॉइड (2.2) और iPhone दोनों में काम करने लगता है ...

Comments

वास्तव में <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1">

— लुकास लुकाक

8 साल बाद और यह अभी भी उपयोगी है। मैंने मेटा टैग को भी छोड़ दिया और एक परियोजना में काम करने के लिए मीडिया क्वेरी नहीं प्राप्त कर सका। व्यूपोर्ट टैग और व्हाम, यह काम करता है

— SoWhat

9 साल बाद, अभी भी इतना उपयोगी है। कैंट का मानना ​​है कि मैं यह

— भूल

@LukasLukac क्यों?

— जोन्सोपोलिस

Answer 2

मीडिया क्वेरी के ऊपर मानक css घोषणाएँ करना न भूलें या क्वेरी या तो काम नहीं करेगी।

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Comments

वास्तव में, आपकी सीएसएस शैली मानक से छोटे आकार तक घटते क्रम में खड़ी है। नियम अभी भी लागू होते हैं यदि आपके पास एक ही फ़ाइल में आपके मीडिया के प्रश्न हैं।

— फिल एंड्रयूज

अगर मेरे पास उक्त वर्ग के लिए मानक सीएसएस घोषणा नहीं है तो भी मेरे लिए काम करता है।

— मेसन

इससे मेरी समस्या हल हो गई। बहुत बहुत धन्यवाद ... मैंने अपने सीएसएस के अति-लिखित होने की संभावना की अनदेखी की।

— pmcg521

Answer 3

मुझे संदेह है कि खोजशब्द onlyयहाँ मुद्दा हो सकता है। मेरे पास इस तरह के मीडिया प्रश्नों का उपयोग करने के लिए कोई समस्या नहीं है:

@media screen and (max-width: 480px) { }

Answer 4

मैंने एक प्रेस साइट में बूटस्ट्रैप का इस्तेमाल किया है, लेकिन यह IE8 पर काम नहीं करता है, मैंने css3-mediaqueries.js जावास्क्रिप्ट का उपयोग किया है लेकिन फिर भी काम नहीं कर रहा है। अगर आप चाहते हैं कि आपकी मीडिया क्वेरी इस जावास्क्रिप्ट फ़ाइल के साथ काम करे तो css में अपनी मीडिया क्वेरी लाइन में स्क्रीन जोड़ें

यहाँ एक उदाहरण है :

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

सीएसएस लिंक लाइन ऊपर की रेखा के रूप में सरल है।

Answer 5

आज मेरी भी ऐसी ही स्थिति थी। मीडिया क्वेरी काम नहीं आई। थोड़ी देर बाद मैंने पाया कि 'और' के बाद की जगह गायब थी। उचित मीडिया क्वेरी इस तरह दिखनी चाहिए:

@media screen and (max-width: 1024px) {}

Comments

इसलिए हमारे पास CSS सत्यापनकर्ता हैं। यह इस विशेष समस्या के लिए प्रासंगिक नहीं है क्योंकि ओपी पहले से ही इंगित करता है कि मीडिया के प्रश्न गैर-मोबाइल ब्राउज़रों में वास्तव में काम करते हैं।

— cimmanon

फिर भी यह मददगार पाया गया क्योंकि यह मेरे मामले में मुद्दा था

— लोरेन शकीपोग्जा

Answer 6

उदाहरण के लिए, सीएसएस कोड का अनुक्रमिक क्रम भी मायने रखता है:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

उपरोक्त कोड काम नहीं करेगा क्योंकि निष्पादित आदेश। निम्नलिखित के रूप में लिखने की आवश्यकता ：

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Comments

यही गलती मैं कर रहा था। धन्यवाद।

— वर्गनहेज़

Answer 7

हमेशा px या रेम जैसी किसी इकाई में अधिकतम-चौड़ाई और न्यूनतम-चौड़ाई का उल्लेख करें। यह मेरे लिए यह समझ से बाहर है। अगर मैं इसे इकाई और केवल संख्या मान के बिना लिखता हूं, तो ब्राउज़र मीडिया प्रश्नों को नहीं पढ़ सकता है। उदाहरण: यह गलत है @media केवल स्क्रीन और (अधिकतम-चौड़ाई: 950) और यह सही है @media केवल स्क्रीन और (अधिकतम-चौड़ाई: 950px)

Comments

धन्यवाद! हालांकि मैं सभी उदाहरणों को देख रहा था, मैंने कभी ध्यान नहीं दिया कि मैं पीएक्स भूल गया था!

— मार्कंड

Answer 8

रिंग में एक और जवाब फेंकना। यदि आप सीएसएस चर का उपयोग करने की कोशिश कर रहे हैं, तो यह चुपचाप विफल हो जाएगा।

@media screen and (max-device-width: var(--breakpoint-small)) {}

सीएसएस चर मीडिया के प्रश्नों (डिजाइन द्वारा) में काम नहीं करते हैं।

Answer 9

अजीब कारण जो मैंने पहले कभी नहीं देखा है: यदि आप मीडिया क्वेरी के बाहर (फ़ायरफ़ॉक्स 69 में) "पेरेंट> चाइल्ड" चयनकर्ता का उपयोग कर रहे हैं तो यह मीडिया क्वेरी को तोड़ सकता है। मुझे यकीन नहीं है कि ऐसा क्यों होता है, लेकिन मेरे परिदृश्य के लिए यह काम नहीं किया ...

@media whatever {
    #child { display: none; }
}

लेकिन माता-पिता को जोड़कर कुछ और सीएसएस आगे पृष्ठ को जोड़ने के लिए, यह काम करता है ...

#parent > #child { display: none; }

लगता है कि माता-पिता को निर्दिष्ट करने से कोई फर्क नहीं पड़ता, क्योंकि एक आईडी बहुत विशिष्ट है और इसमें कोई अस्पष्टता नहीं होनी चाहिए। शायद यह फ़ायरफ़ॉक्स में एक बग है?

Answer 10

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

सुनिश्चित करें कि आपके सभी सीएसएस टिप्पणी इस मार्कअप का उपयोग करते हैं /*... */- जो एमडीएन के अनुसार सीएसएस के लिए सही टिप्पणी मार्कअप है

एक लिंटर या एक सुरक्षित ऑनलाइन सत्यापनकर्ता के साथ अपने सीएसएस को मान्य करें। यहाँ W3 द्वारा एक है

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

IntelliJ टेक्स्ट एडिटर ने मुझे ctrl + / hotkey का उपयोग करके एक LESS फ़ाइल में सीएसएस की विशिष्ट लाइनों पर टिप्पणी करने की अनुमति दी, जो इसे सम्मिलित करने के अलावा बहुत अच्छा था// मान्यता प्राप्त फ़ाइल प्रकारों पर डिफ़ॉल्ट रूप से । यह फ्रीवेयर नहीं है और कम काफी मुख्यधारा है इसलिए मैंने इस पर भरोसा किया और इसके साथ चला गया। इससे मेरा कोड टूट गया। प्रत्येक फ़ाइल के लिए यह सही टिप्पणी मार्कअप सिखाने के लिए एक प्राथमिकता मेनू है।

Comments

ओपी पहले से ही सही टिप्पणी मार्कअप का उपयोग कर रहा है, जैसा कि पोस्ट में दिखाया गया है ।

— टाइलेर

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

— टायलरएच

अरे बाप रे! आपने मेरा दिन बचाया।

— 22

Answer 11

नीचे दिए गए मेटा टैग को शामिल करने से ब्राउज़र व्यूपोर्ट को अलग तरह से ज़ूम करने में सक्षम हो सकता है।

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

Answer 12

मुझे हाल ही में इस मुद्दे का भी सामना करना पड़ा, और मुझे बाद में पता चला कि मैंने इसके बीच जगह नहीं रखी थी andऔर (। यह त्रुटि थी

@media screen and(max-width:768px){
}

फिर मैंने इसे सही करने के लिए इसे बदल दिया

@media screen and (max-width:768px){
}

Answer 13

मैं निर्भर करता है कुछ तरीकों का उपयोग करें। उसी स्टाइलशीट में मैं उपयोग करता हूं: @मीडिया (अधिकतम-चौड़ाई: 450px), या अलग से सुनिश्चित करें कि आपके पास हेडर में लिंक सही है। मुझे आपके फ़िक्मेअप पर एक नज़र थी और आपके पास सीएसएस के लिए लिंक की एक भ्रमित करने वाली सरणी है। यह आप के रूप में एचटीसी इच्छा एस पर भी काम करता है

Comments

फिर से सीएसएस पर एक नज़र डालेंगे, धन्यवाद ... यह जानने के लिए अच्छा है कि यह कुछ पर काम करता है।

— Redconservatory

Answer 14

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

Comments

कृपया अपने कोड में कुछ स्पष्टीकरण जोड़ें, यह दिखाते हैं कि यह समस्या को कैसे हल करता है - यह भविष्य में दूसरों की मदद करेगा, और आपके उत्तर के उत्थान की संभावना अधिक है

— हमारे आदमी में केले

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

— फेरीबिग

Answer 15

मेरे लिए मैंने max-heightइसके बजाय संकेत दिया था max-width।

अगर वह तुम हो, तो इसे बदल दो!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

Answer 16

यह भी हो सकता है यदि ब्राउज़र ज़ूम स्तर सही नहीं है। आपकी ब्राउज़र विंडो ज़ूम 100% होनी चाहिए। क्रोम Ctrl + 0में ज़ूम स्तर को रीसेट करने के लिए उपयोग करें।

Comments

यह नीचे मतदान नहीं होना चाहिए था। यह मेरी निराशाजनक समस्या का जवाब था!

— अमीर अल्मूसावी