@media 屏幕查询不起作用

Question

我创建了一个站点（对 html/css 来说还很新），但某些 @media 查询无法正常工作。想法是在小于 500 像素的屏幕上显示 container1 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%；仍然活跃。

@media 屏幕查询不起作用

@media screen query not working

html

css

media

responsive