Question

我在这里检查了其他类似问题的答案，但无法找到解决方案。

我创建了一个相当简单的网页，我不希望在移动电话上显示“顶栏”。

我设置了一个媒体查询来处理这个，但我无法让它工作。毫无疑问，我正在做一些愚蠢的事情。

希望有人能提供帮助。

HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Site Title</title>

<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

</head>

<body>

<div id="top-bar">
<div id="top-bar-content">
    <div id="ph-contact"><span style="padding-right:5px;"><i class="fa fa- phone"></i></span>9876 1234 | <span style="padding-right:5px;"><i class="fa fa-envelope-o"></i></span>info@someplace.com.au</div>
    <div id="social-icons">
        <i class="fa fa-facebook"></i>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-google-plus"></i>
    </div>
   </div>
</div>
<header>
<div id="header-content">
    <div id="logo"><img src="http://placehold.it/290x133"></div>
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>

        </ul>
     </div>
    </div>
</header>

<!-- Just to temporarily give the page some height -->
<div style="width:100%; height:1000px;"></div>


</body>
</html>

CSS：

body{
margin:0;
padding:0;
border:none;
font-family: 'Open Sans', sans-serif;
overflow:hidden;
}

#top-bar{
width:100%;
height:50px;
display:block;
border-bottom:1px solid rgba(255, 153, 255, 0.1);
}

#top-bar-content{
width:980px;
margin-left:auto;
margin-right:auto;
padding-top:15px;
padding-right:10px;
}

#ph-contact{
float:left;
font-size:14px;
color:#F9F;
display:block;
}

#social-icons{
display:block;
float:right;
}

#social-icons i{
font-size:16px;
margin-right:10px;
color:#F9F;
}

header{
width:100%;
height:200px;
background-color:#F9F;
}

#header-content{
width:980px;
margin-left:auto;
margin-right:auto;
}



#logo{
float:left;
padding-top:25px;
}

#nav{
float:right;
padding-top:65px;
}

#nav ul{
margin:0;
padding:0;
list-style-type:none;
}

#nav ul li{
display:inline;
margin-right:10px;
}

#nav ul li a:link{
color:#fff;
font-size:16px;
text-transform:uppercase;
text-decoration:none;

}

/* MEDIA QUERIES */

/* Smartphones (portrait and landscape) ----------- */

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

#top-bar{
display:none;
}

#top-bar-content{
display:none !important;
}

#social-icons{
display:none !important;
float:none;
}

#ph-contact{
display:none !important;
}

#nav{
display:none !important;
}

#nav ul{
display:none !important;
}

#nav ul li{
display:none !important;
}

#nav ul li a:link{
display:none !important;

}

}

（正如你所看到的，在我的绝望中，我已经疯狂地展示了：没有人试图让它发挥作用）。

我在http://jsfiddle.net/Mekong/c8jbd6v9/8/设置了一个jsFiddle但我无法显示Font Awesome图标。

Answer 1

我只是去了小提琴，删除了@media screen and (max-width: 480px) { #top-bar { display: none; } }下的所有内容并将其放入

protected function _construct()
{
    $this->_init('salesrule/coupon_usage', '');
}

它有效。所以现在它在浏览器达到480px时消失了。根据需要调整。如果您需要再次更改，只需使用其他屏幕阈值大小执行另一个查询，它将取代此查询。

Answer 2

你试图把2个媒体查询放到一个，这是不能做的，试试这个，如果你需要两个查询，如果不是只写你想要的那个：

@media screen and (min-width: 320px) {
    #top-bar {
        display: none;
    }
}

@media screen and (min-width: 480px) {
    #top-bar {
        display: none;
    }

}

如果您愿意，可以将 min-width 替换为 max-width ，但我个人更喜欢使用 min-width 测量。

另一个提示是：

隐藏内容时，只需隐藏父元素和所有子元素将默认隐藏

从而节省您的时间和额外的代码行。

媒体查询 - 显示：无效

2 个答案: