पृष्ठ को उत्तरदायी लेआउट में परिवर्तित करते समय, css शैली 620px ब्रेकपॉइंट के बाद रीसेट होती है। प्रभावित डिज़ाइन भाग इस प्रकार है। कृपया ध्यान दें निम्नलिखित स्निपेट पूरी तरह से काम कर रहा है और केवल यह बताने के लिए कि मैं क्या कर रहा हूं । समस्या केवल तभी होती है जब इसे पूर्ण कोड के साथ जोड़ा जाता है।

.tfulltiny{
	float: left;
	width: 100%;
	padding: 20px 0 20px 0;
}
.tblocktiny{
	float: left;
	text-align: left;
	margin-top: 10px;
}
.tcelltiny{
	float: left;
	text-align: left;
	color: #609;
	font-weight: bold;
}

@media only screen and (min-width: 680px) {
	body {
        margin:0 40px 0 40px;
    }
    .tblocktiny{
	    width: 16%;
	}
	.tcelltiny {
	    width:100%;
	}
}
@media only screen and (max-width: 680px) {
	.tblocktiny{
	    width: 99%;
	}
	.tcelltiny {
	    width:100%;
	}
}
    <div class="tfulltiny">
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Planet</span>
			</div>
		</div>
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Longitude (Deg:Min:Sec)</span>
			</div>
		</div>
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Rasi</span>
			</div>
		</div>
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Longitude (Deg:Min:Sec)</span>
			</div>
		</div>
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Star</span>
			</div>
		</div>
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Pada</span>
			</div>
		</div>
</div>

680px स्क्रीन के बाद अपेक्षित उत्पादन: अपेक्षित आउटपुट

लेकिन अचानक 620px + को पार करते समय शैली गायब हो जाती है

What I'm getting after 620px

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

संपादित करें: खोज के बाद, मुझे कोड में 620 गुना चौड़ाई 2 गुना इस्तेमाल हुई। पता नहीं इस त्रुटि में इसकी कोई भूमिका है।

@media only screen and (min-width: 620px) {
      .tblocksml{
            width: 49%;
      }
      .tcellsml {
            width:99%;
      }
}
@media only screen and (max-width: 620px) {
      .tblocksml{
            width: 99%;
      }
      .tcellsml {
            width:99%;
      }
}
0
Dani Vijay 18 नवम्बर 2015, 13:13

2 जवाब

सबसे बढ़िया उत्तर

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

0
Dani Vijay 2 पद 2015, 06:15

यह https://jsfiddle.net/2Lzo9vfc/118/ आज़माएं

सीएसएस

     @media only screen and (max-width: 680px) {
        .tblocktiny{
           width: 99%;
           margin-top: 0;
        }
          .tcelltiny {
            width:100%;
            color: black;
            font-weight: normal;

          }
      }

अन्य समाधान https://jsfiddle.net/2Lzo9vfc/119/

    @media only screen and (min-width: 680px) {
      body {
        margin:0 40px 0 40px;
      }

      .tblocktiny{
        width: 16%;
         margin-top: 10px;
      }
      .tcelltiny {
         width:100%;
         color: #609;
         font-weight: bold;
      }
  }
0
Nenad Vracar 18 नवम्बर 2015, 10:25