CSS-媒體查詢不起作用

我的問題是我想讓一個特定的元素消失一旦某些屏幕寬度被擊中，但不管我做什麼它保持。我也試圖做簡單的媒體查詢CSS，如改變背景顏色的特定寬度，但這也不工作。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; 
} 

}

來源

2017-10-18 zee

如果你想「消失」，並把它佔據的空間項目「消失」過

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

    #open { 
     display: none; 
    } 

}

如果你想讓它「 dissapear但它佔據的空間舉行

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

    #open { 
     visibility: hidden ; 
    } 

}

一個更好的解釋是display: none你是「德爾eting「元素，而visibility: hidden只是讓它」隱形「，但它仍然佔據着這個空間。欲瞭解更多信息，請登錄here。

來源

2017-10-18 17:53:07

您可以使用下面CSS

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

來源

2017-10-19 02:58:17 bellabelle

CSS-媒體查詢不起作用

回答

相關問題