媒体查询不起作用

我试图让我的.sideBar在屏幕为800px或更少时消失。该风格在480px媒体查询不起作用

工作，我已经设置了视口，并使用!important到display:none;取代当前的样式都试过，但仍然不能似乎得到它的工作。

任何帮助，将不胜感激。

编辑：

没有媒体的质疑似乎工作，没有任何人知道为什么吗？

JS小提琴here

似乎在max-width:800px媒体查询工作不...

头：

<link rel="stylesheet" type="text/css" href="layout1.css"/> 
<meta name="viewport" content="width=device-width, initial-scale=1">

当前样式：

.sideBar { 
position:fixed; 
top:0; 
left:0; 
background:#C6C; 
width:200px; 
height:100%; 
z-index:999; 
margin-left: auto; 
margin-right: auto; 
left: 0; 
right:850px; /* Must include width of sidebar */ 
border-right: solid 10px #fff; 
border-left: solid 10px #fff; 
}

我media queries设置为800px ;

@media only screen and (max-width: 800px) { 
.centre{width:100% !important;} 
.visibleArea{width:100% !important;} 
.sideBar {display: none !important;} 
}

任何帮助将是巨大的

这里是我的侧边栏HTML：

<!--SIDE BAR--> 
<div class="sideBar"> 
       <div id="logo"> 
        <img src="images/logo-big.png" /> 
       </div> 

       <div id="nav"> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Solutions</a></li> 
         <li><a href="#">Blog</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </div> 

       <div id="newsletter"> 
        <h1>NEWSLETTER</h1> 

       <div id='content'> 
        <div id="hidden-content"> 
         <span class="signup">Enter your e-mail address to sign up for our monthly newsletter</span> <input class="side-mail" type="text" name="FirstName" placeholder="[email protected]"><br> 
         <input type="submit" value="SUBMIT" class="submit-button"> 
        </div> 
       </div> 

       <div id='button'><sctrong><img src="images/more-banner.png" /></strong></div> 

       <script> 
        $("#button").click(function(){ 
          $("#content").stop().slideToggle(); 
          return false; 
         }); 

       $("#button").hover(function(){ 
          $(this).stop().css({"cursor" : "pointer"}) 
         }); 
       </script> 

       </div> 

        <div id="barFoot"> 

        <p> 
        Paxton House 
       </p> 

       </div> 


</div>

来源

2015-04-21 5kud

你能与其他元素的HTML提供给我们和告诉我们什么是行不通的？ – vdwijngaert

我想获得sidebar的div divapear当屏幕下800px宽，我用display：none;但它不起作用，.sideBar和CSS的HTML在上面的问题 – 5kud

为什么不创建一个演示问题的所有代码的小提琴？ – jcuenod

也只是媒体的查询，评论前对线276额外的右括号有两个正斜杠“//”，当它应该只有一个。

//*=================================================================================*| 
           MEDIA QUERIES        
=====================================================================================*//

您可以了解正确的CSS注释语法在这里： https://developer.mozilla.org/en-US/docs/Web/CSS/Comments

我已经纠正您的意见给你看： https://jsfiddle.net/f370kxya/3/

来源

2015-04-21 10:30:37 Muggles

媒体查询不起作用

回答

相关问题