जब पृष्ठ 900px या उससे कम चौड़ाई का हो तो मैं एक div को छिपाने के लिए CSS @media प्रॉपर्टी का उपयोग कर रहा हूं। यह पहली बार काम करता है क्योंकि जब मैं पृष्ठ का आकार 901px से कम करता हूं तो div गायब हो जाता है, लेकिन जब मैं पृष्ठ को उसके सामान्य आकार में वापस करता हूं, तो div छिपा रहता है। यहाँ कोड है:

<style>
        .mydiv {
           display:block
        }
        @media (max-width: 900px) { 
        .mydiv { 
          display: none;
        } 
      }
     
     
</style>

आकार वापस सामान्य होने के बाद div को फिर से प्रकट करने के लिए मुझे क्या करना होगा?

1
Jackie Soussan 4 जुलाई 2020, 22:41

4 जवाब

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

मैंने वास्तव में display: none. का उपयोग करने के बजाय visibility: hidden का उपयोग करके इसे ठीक किया मुझे नहीं पता कि यह एक सुसंगत सुधार है, लेकिन इसने मेरे लिए काम किया

0
Jackie Soussan 4 जुलाई 2020, 23:50

प्रयत्न:

<style>
    .mydiv { 
      display: block;
    } 

    @media (max-width: 900px) { 
    .mydiv { 
      display: none;
    } 
  }
 
 
</style>
0
C. Celora 4 जुलाई 2020, 22:46

हो सकता है कि आपकी शैली कहीं हस्तक्षेप कर रही हो, हो सकता है कि आप निरीक्षक को देखना चाहें कि कौन सी शैलियों को लागू किया जा रहा है।

(इसका परीक्षण करने के लिए स्निपेट को विस्तृत मोड में खोलें)

.hide-me {
  width:  200px;
  height: 50px;
  background: green; /* visible */
}

/* This has to come last */
@media only screen and (max-width: 900px) {
  .hide-me {
    background: red; /* hidden */
  }
}
<div class="hide-me"></div> 
0
geauser 4 जुलाई 2020, 23:39

मीडिया प्रश्नों के बाहर बस कुछ कोड करें जिसका अर्थ है कि प्रत्येक मीडिया प्रकार द्वारा विचार किया जाना चाहिए, सिवाय इसके कि यदि परिभाषित गुणों को मीडिया प्रश्नों के अंदर भी परिभाषित किया गया है, तो इसका मतलब है कि यदि आप नहीं चाहते हैं कि मीडिया प्रश्न पूरे पृष्ठ की सभी शैली को प्रभावित करें बस परिभाषित करें विश्व स्तर पर कुछ गुण

/* styles */
/* for all media except when property is redefined inside the media queries otherwise is global style */
@media screen and (max-width: 900px){
 /* styles */
 /* for the style of all media with that bellow width */
}
-1
Gad 4 जुलाई 2020, 23:06