@media 查询未在范围内应用

Question

我想使我的 ul height 变量，所以当我的 width 介于 600px 和 768px 之间的屏幕有一定的 height(ul) 例如 390px，当 height 在 768 和 900 之间时，会有另一个 height (the ul) like 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，需要在 and

之间给出 space

所以这个：

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

Answer 2

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

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

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

Answer 3

你可以试试这个：

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

@media 查询未在范围内应用

@media query not applied within a range

html

css

media-queries