Question

我正在学习使我的网站响应的过程。我遇到这个问题，Opera使用@media查询下的特定div来“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">

Answer 1

将媒体查询更改为此

@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

display：none在Opera中不起作用

1 个答案: