媒体查询 - display:none 不工作

Question

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

我创建了一个相当简单的网页，我不希望 'top-bar' 在手机上显示。

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

希望有人能提供帮助。

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;

}

}

（如您所见，在绝望中，我发疯了 display:none 试图让它工作）。

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

Answer 1

我刚刚去了 fiddle，删除了 /* MEDIA QUERIES */ 下的所有内容并放入

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

它奏效了。所以现在当浏览器达到 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 -宽度 测量值。

另一个提示是：

when hiding things, just hide the parent element and all the children will hide by default

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

媒体查询 - display:none 不工作

Media Query - display:none not working

css

media-queries