媒体查询 - 显示：没有不起作用答案

【问题标题】：Media Query - display:none not working媒体查询 - 显示：没有不起作用
【发布时间】：2015-10-19 19:23:48
【问题描述】：

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

我创建了一个相当简单的网页，我不希望在手机上显示“顶部栏”。

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

希望有人能提供帮助。

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 图标。

【问题讨论】：

您还没有在小提琴上链接外部文件，您可以在左侧窗格中添加它。我为你做了jsfiddle.net/web_dever/c8jbd6v9/11
将<meta name="viewport" content="width=device-width, initial-scale=1"> 添加到您的标题中。另外我通常会选择 max-width 而不是 max-device-width (stackoverflow.com/questions/18500836/…)
jsbin.com/wupovexeze/1/edit?html,css,output

标签： css media-queries

【解决方案1】：

我只是去了小提琴，删除了/* MEDIA QUERIES */下的所有内容并放入

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

它奏效了。所以现在当浏览器达到 480 像素时它就会消失。根据需要进行调整。如果您需要再次更改，只需使用另一个屏幕阈值大小进行另一个查询，它将取代这个。

【讨论】：

好的。谢谢金甜菜。都在工作。所以我原来的媒体查询语法是错误的。也感谢所有回复的人。非常感谢！

【解决方案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 测量值。

另一个提示是：

隐藏东西时，只隐藏父元素和所有子元素默认隐藏

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

【讨论】：