@media查询范围

我想让我的ulheight变量中不适用，所以当我有屏幕与width600px和768px之间有一定的height（在ul）例如像390px和height当之间768和900有另一个height（ul）像420px等等。@media查询范围

我不明白为什么我的媒体查询不起作用。

下面是代码：

HTML：

<div id="meniu"> 
     <div id="cat" > 
      <div class="catico"> 
       <img src="img/Categories.png"/> 
      </div> 
      <div class="cattext"> 
       Categories: 
      </div> 
     </div> 
     <ul> 

      <li><div class="cerculet"></div><a href="#" class="dece">All categories </a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Everything </a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Nature </a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Animals </a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">popular </a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Traveling </a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Companies </a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Sports</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Food</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Restaurants</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Hotels</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Social</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Business</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Technology</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Music</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Art</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Personal</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Films</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Books</a> </li> 
      <li><div class="cerculet"></div><a href="#" class="dece">Products</a> </li> 



     </ul>   

    </div>

这里是CSS：

#meniu{ 
position:fixed; 
top:9.5em; 
height:420px; 
width:140px; 
float:left; 
line-height:30px; 
font-size:1.15em; 
margin-left:0px; 
padding-right:75px; 
padding-left:30px; 
text-decoration:none;} 

#meniu ul{ 
font-size:1.2em; 
    margin-left:0px; 
    position:relative; 
    right:30px; 
    height:390px; 
    padding-top:5px; 
    margin-top:10px; 
    overflow-y:scroll; 
    width:150px; 
    color:#797979; 
    list-style-type:none; 
    background-color:#F8FDF8;} 

#cat{ 
color:#08AB08; 
font-size:1.3em; 
width:190px; 
height:30px; 
float:left; 
right:30px; 
position:relative; 
text-align:center; 
padding-top:5px; 
background-color:#F8FDF8;} 

.cerculet{ 
border-radius:100%; 
color:#00C800; 
height:10px; 
width:10px; 
background-color:#00A800; 
position:relative; 
float:left; 
right:22px; 
margin-right:-10px; 
top:10px;} 

.catico{ 
float:left; 
position:relative; 
left:12px; 
top:3px;} 

.cattext{ 
position:relative; 
float:left; 
left:15px; 
font-size:1em;} 


@media screen and(max-height:767px){ 
#meniu ul{ 
height:390px;} 
} 
@media (min-height:768px)and(max-height:899){ 
#meniu ul{ 
height:450px;} 
}

来源

2016-04-14 Andrei Bularca

你需要切换您的查询的顺序，因为您正在使用非移动第一种方法，这意味着最后一个查询将覆盖第一个。

加上这些mising在查询一个px，需要and

之间给予空间，所以这样的：

@media screen and(max-height:767px){ 
    #meniu ul{ 
    height:390px; 
    } 
} 
@media (min-height:768px) and (max-height:899){ 
    #meniu ul{ 
    height:450px; 
    } 
}

应该是这样的：

@media (min-height:768px) and (max-height:899px){ 
    #meniu ul{ 
    height:390px; 
    } 
} 
@media screen and (max-height:767px) { 
    #meniu ul{ 
    height:450px; 
    } 
}

来源

2016-04-14 13:06:49 dippas

开关* *您查询的顺序.... –

它的工作现在，谢谢：d –

问题在于，当屏幕高度发生变化时，它不会修改，它仍然如您所说在上次媒体查询的高度。我如何解决这个问题？ –

-1

确保你将以下元标记添加到<head>部分

<meta name="viewport" content="width=device-width, initial-scale=1">

这是强制性的使用@media查询

来源

2016-04-14 13:12:06

是的，我知道，标签已添加。 –

你可以试试这个：

@media only screen and (max-device-width: 899px) and (min-device-width: 768px) 
    { 
     ul 
     { 
      height: 390px; 
     } 
    } 

@media only screen and (max-device-height: 760px) and (min-device-height: 600px) 
    { 
     ul 
     { 
      height: 420px; 
     } 
    }

来源

2016-04-14 13:12:34

@media查询范围

回答

相关问题