@media屏幕查询不起作用

Question

我创建了一个网站（相当新的html / css），某些@media查询无效。 想要在小于500px的屏幕上显示容器1 95％的屏幕..

提前感谢！

见下面的代码：

  #container1 {
    float: left;
    max-width: 45%;
    min-height: 320px;
    padding:20px;
    margin: 1px;   
    border: solid #ffffff;

}

#container1:hover { border:solid #000000;
}
#container1:hover { background-color: antiquewhite;
}

@media screen and (max-width: 500px) {

   #container1 {
   width: 95%;
 }
}

Answer 1

您在之前的声明中设置了max-width: 45%;。改为：

@media screen and (max-width: 500px) {

   #container1 {
       width: 95%;
       max-width: none;
   }
}

Answer 2

你也必须覆盖最大宽度！ 除此以外     最大宽度：45％; 仍然活跃。