CSS媒體查詢不起作用
[英]CSS- media queries not working
問題描述
我的問題是，一旦擊中某個屏幕寬度，我想使特定元素消失，但是不管我怎么做，它都保持不變。 我也嘗試做簡單的媒體查詢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()">×</a>
</div>
<span id="open" class="open" onclick="Opennav()">☰</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;
}
}
2 個解決方案
解決方案1
0 2017-10-18 17:53:07
如果您希望該項目“消失”並且也要占據其空間“消失”
@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只會使其“不可見”，但它仍在占用該空間。 有關更多信息，請參見此處 。
解決方案2
0 2017-10-19 02:58:17
您可以在CSS下方使用
@media screen and (max-width:650px) {
#open{
display: hide;
}
}
CSS-過渡不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.