Question

我想制作我的ul height变量，因此当width和600px之间的768px屏幕有height时（例如ul），例如390px，以及height介于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，需要在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;
  }
}

Answer 2

你可以试试这个：

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

Answer 3

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

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

这对于使用@media查询

是必需的

@media查询未在范围内应用

3 个答案: