html - @media 查询未在范围内应用

Question

我想让我的 ul height 变量，所以当我的屏幕 width 在 600px 和768px 具有特定的高度(ul)，例如 390px，当 高度 介于 768 和 900 之间，以获得另一个 height(ul)，如 420px 等等等等。

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

代码如下:

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

Answer 1

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

此外，您在其中一个查询中遗漏了一个px，需要在和之间留出空格

所以这样:

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