媒體查詢 - 當最初沒有顯示時，如何在最大寬度上進行div顯示

我有一個名爲「容器」的div，當最大寬度達到47em時應該顯示該容器。這可以通過放大來觸發。它的初始顯示不是，而是在媒體查詢中，我將其更改爲顯示塊。問題在於，即使放大到足以使最大寬度變爲47em，它仍然不顯示任何內容。爲什麼是這樣的，我該如何解決這個問題？媒體查詢 - 當最初沒有顯示時，如何在最大寬度上進行div顯示

代碼：http://codepen.io/anon/pen/RWBJXv

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    font-family: verdana, arial, helvetica, sans-serif; 
 
} 
 
    
 
@media (max-width: 47em) { 
 
    #container { 
 
    display: block; 
 
    } 
 
} 
 
    
 
div#container { 
 
    display:none; 
 
} 
 
    
 
div#nav { 
 
    position: relative; 
 
    width: 100%; 
 
    background: white; 
 
    box-shadow: 1px 1px 15px #888888; 
 
} 
 
    
 
div#logo { 
 
    border-right-style: solid; 
 
    border-width: 1px; 
 
    border-color: rgba(0, 0, 0, 0.15); 
 
    font-family: 'Myriad Pro Regular'; 
 
    font-weight: normal; 
 
    color: #1E3264; 
 
    font-size: 2em; 
 
}

<body> 
 
    <div id="container"> 
 
    <div id="nav"> 
 
     <div id="logo">TEST</div> 
 
    </div> 
 
    </div>

來源

2015-11-03 BubbleTree

我誤解了。刪除評論。 –

你的代碼中有幾個問題：

首先，div#container是一個CSS選擇具有較高的特異性比#container，你正在媒體查詢中使用，所以一般規則優先。第二，請確保您始終將您的媒體查詢規則後您的一般規則。

http://codepen.io/anon/pen/zvLLPa

來源

2015-11-03 16:32:17 connexo

似乎是一個爲了&特異性問題。

嘗試修改此

@media (max-width: 47em) { 
    #container { 
    display: block; 
    } 
} 

div#container { 
    display:none; 
}

這樣：

#container { 
    display:none; 
} 

@media (max-width: 47em) { 
    #container { 
    display: block; 
    } 
}

Codepen Demo

來源

2015-11-03 16:32:48

有沒有動機的一天？我習慣於找到你的答案，詳細解釋問題和解決方案:) – connexo

我正在製作演示併發布，然後我看到你已經提出了觀點。所以我離開了它，給了你+1。 :) ...是的，今天我的表現很差 - 今天糟糕的表現。 –

如果換在你的媒體查詢與普通CSS，並添加一個重要的標籤此挑選出您問題舉例：

#container { 
    display:none; 
} 

@media (max-width: 47em) { 
    #container { 
    display: block; 
    } 
}

看看這個codepen：http://codepen.io/sshhdaniella/pen/EVppwR

來源

2015-11-03 16:35:26 sshhDaniella

'！important;'的使用幾乎是*永遠不可取的，在這種情況下，也是完全不必要的。即使使用'！important;'也是唯一的解決方案 - 它將使交換變得不必要。 – connexo

第二次看，你是對的，重要的使用是不必要的，使用明確的選擇器和排序是這裏的問題。 – sshhDaniella

媒體查詢 - 當最初沒有顯示時，如何在最大寬度上進行div顯示

回答

相關問題