display：none在Opera中沒有工作

我正在學習使網站響應的過程。我遇到了這個問題，Opera使用@media查詢中的特定div來「display-none」。適用於Opera以外的所有新瀏覽器。我錯過了什麼嗎？display：none在Opera中沒有工作

CSS：

@media only screen and (max-width: 400px) { 
    body { 
     font-size: 75%; 
    } 

    #column2, #name { 
     display: none; 
    } 

    @-o-viewport { 
     width: device-width; 
     height: device-height; 
     max-zoom: 2; 
     min-zoom: 0.5; 
    } 
}

實際DIV我想在我的HTML隱藏：

<div id="column2"> 
<h1 id="name">P&nbsp;U&nbsp;N&nbsp;K&nbsp;I&nbsp;E&nbsp;&nbsp;D&nbsp;E&nbsp;S&nbsp;I&nbsp;G&nbsp;N&nbsp;S</h1></div></div>

視口設置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

來源

2015-02-23 punkie

既然你確實有歌劇特定CSS有（'-o-viewport'），如果你刪除它的工作原理？我不知道這應該做什麼，但它是一個明顯的紅旗。 – deceze 2015-02-23 04:39:45

我剛剛添加了Opera特定的標籤，因爲我一直在試圖研究這一點。認爲會解決它，但沒有。如果我刪除它，它沒有任何區別。 – punkie 2015-02-23 04:47:27

媒體查詢更改這個

@media only screen and (max-device-width: 400px) { 
    body { 
     font-size: 75%; 
    } 

    #column2, #name { 
     display: none; 
    } 
}

它在Opera Mini上的表現與其他瀏覽器上的表現相同 - 所以通過使用媒體查詢並針對所有設備功能進行定位。

CSS3媒體查詢支持

http://caniuse.com/#feat=css-mediaqueries

來源

2015-02-23 04:53:46 4dgaurav

Div在屏幕達到指定尺寸時仍然不會消失。我試圖達到的是類似於http://charlottetang.com。她的「名字等」當窗口/屏幕尺寸達到其點時消失。這只是歌劇所具有的怪癖嗎？我在@media查詢中有其他設置，除了這個小的「display-none」外，還可以正常工作。哦，我在這兩個div標籤中刪除了「display：block/in-line blocks」。 – punkie 2015-02-23 05:28:29

display：none在Opera中沒有工作

回答

相關問題