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中没有工作

回答

相关问题