CSSメディアのクエリが機能しない

私の問題は、一度特定の要素が消えるようにしようとしていることです。特定の画面の幅がヒットしましたが、何をしても問題ありません。私はまた、特定の幅の背景をの色に変更するなど、簡単なメディアクエリCSSを試してみましたが、そのどちらも問題ありません。CSSメディアのクエリが機能しない

解決策はありますか？

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; 
    } 

}

を「消える」占有：は、これは私のhtmlコードであるあなたに
をありがとう消えるけど、それはより良い説明は、あなたが「デルあるdisplay: noneということでしょう

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

    #open { 
     visibility: hidden ; 
    } 

}

を開催することが占有するスペース要素は完全に「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メディアのクエリが機能しない

答えて

関連する問題