Question

我无法弄清楚，为什么我的媒体查询不起作用。有人能告诉我，为什么在我测试的所有手机和平板电脑上，DIV总是黄色的？

＆＃13;

.test {
  display: block;
  width: 100%;
  height:500px;        
}  

@media all and (max-width: 360px) {
  .test {
    background-color:aqua;      
  }
}
@media all and (min-width: 360px) {
  .test {
    background-color: #CCC;      
  }
}    
@media all and (min-width: 768px) {
  .test {
    background-color: #FFE000;      
  }
}

＆＃13;

<div class="test">sfds fsdf dsfsd</div>

＆＃13;

我做错了什么？

Answer 1

您已添加媒体查询，但尚未为其添加元标记。

https://css-tricks.com/snippets/html/responsive-meta-tag/

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

在您的头部添加元标记。

始终按顺序编写代码。

@media all and (min-width: 360px) {
.test {
    background-color: #CCC;      
}
}
@media all and (min-width: 768px) {
.test {
    background-color: #FFE000;      
}
} 
@media all and (max-width: 360px) {
.test {
    background-color:aqua;      
}
}

Answer 2

首先使用更高分辨率，因此重新排序查询：

@media all and (min-width: 768px) {
    .test {
        background-color: #FFE000;      
    }
} 
@media all and (min-width: 360px) {
    .test {
        background-color: #CCC;      
    }
}
@media all and (max-width: 360px) {
   .test {
        background-color:aqua;      
    }
}

Answer 3

不会更好吗？

 .test {
  display: block;
  width: 100%;
  height:500px;
  background-color:aqua;      
}   

@media all and (min-width: 360px) {
  .test {
    background-color: #CCC;      
  }
}    
@media all and (min-width: 768px) {
  .test {
    background-color: #FFE000;      
  }
}

你使用了什么设备？

CSS-MediaQuerys未显示在移动设备上

3 个答案: