Question

我的问题是我试图让一个特定的元素一旦消失一定的屏幕宽度被击中，但无论我做什么它留下来。我还试图做简单的媒体查询css，如改变背景特定宽度的颜色，但也不起作用。

有人可以建议任何解决方案吗？谢谢你这是我的HTML代码：

enter code here<!DOCTYPE HTML> 
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="technology blog"/>   
    <meta name="keywords" content="tech reviews,movie and tv reviews"/>
    <title>MNKTech</title>
    <link rel="stylesheet" href="main2.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">


</head>

<body>
  <div id="header-ad"></div>

   <div class="wrapper">
    <header id="mnheader">
     <nav>

       <div id="logo"><h1 id="branding"><a href="#">MNKTech</a></h1></div>  
       <div class="primary-nav">
          <ul> 
            <li class="menu" id="tech-menu"><a href="#"> Tech</a></li>
            <li class="menu" id=" howto-menu"><a href="#"> How To</a></li>   
          </ul>
        <a href="javascript:void(0)" class="close" 
onclick="closenav()">&times;</a>
       </div>    

         <span id="open" class="open" onclick="Opennav()">&#9776</span>
          <div class="social"> 
            <ul>
             <li class="facebook"><a href="#"><i class="fa fa-facebook" 
aria-hidden="true"></i></a></li>
             <li class="twitter"><a href="#"><i class="fa fa-twitter" aria-
hidden="true"></i></a></li>
             <li class="google"><a href="#"><i class="fa fa-google-plus" 
aria-hidden="true"></i></a></li>
             <li class="pinterest"><a href="#"><i class="fa fa-pinterest" 
aria-hidden="true"></i></a></li>
            </ul> 


        </div>


      </nav>
      <!footer>
      <div>
        </div>

















</body>



</html>

body{
margin: 0;
text-align:center;
}


h1{
color: white;
}


/* header
================*/ 
header{
background-color: dimgrey;
position: fixed;
width: 100%;

}
/*#header-ad{
min-height: 7vw;
}*/

header #branding{
float: left;

}
/* nav 
 =========*/
nav ul{
margin: 0;
padding: 0;
list-style: none;


}

.primary-nav ul {
 top: 50px;
 text-align: center;
 }

 nav li{
display: inline-block;
margin: auto;
margin-top: 26px;
float: left;
}

nav a{
color: white;
font-weight: 099;
text-decoration: none;
text-transform: uppercase;
font-family:sans-serif;
padding: 0.75em;
}

.social{
float: right;
margin-right: 50px;
font-size: 20px;
margin: auto;
margin-bottom:auto;
text-align: center;
}

.open{
float: right;
margin: 20px;
font-size: 30px;
color: white;
margin-top: 18px;
left: 50px;
display: block;
cursor: pointer;
}

.social ul{
margin-right: 50px;

}
.social ul li{
margin-top: 27px;
}

.cointainer{
width:95%;
margin: 0 auto;
}

@media screen and (min-width : 0px) and (max-width:650px) {

#open{
    display: hide;
}

}

Answer 1

如果你想让这个项目“消失”并让它占据的空间“消失”

@media screen and (min-width: 0px) and (max-width: 650px) {

    #open {
        display: none;
    }

}

如果你想让它“消失，但它所占据的空间被占用

@media screen and (min-width: 0px) and (max-width: 650px) {

    #open {
        visibility: hidden ;
    }

}

更好的解释是display: none你完全“删除”了这个元素，而visibility: hidden只是让它“隐形”但它仍然占据了那个空间。有关详细信息，请参阅here。

Answer 2

您可以在CSS

下方使用

@media screen and (max-width:650px) {
#open{
    display: hide;
}
}

CSS-媒体查询不起作用

2 个答案: