Question

我有我的CSS文件，如下所示：

.topBarBox{
    background-color:black;
}

@media screen and (max-width: 900px) {
  .topBarBox{
     background-color:blue;
  }
}

无论屏幕尺寸是多少，div的背景颜色都是黑色。我在这里做错了吗？

Answer 1

更改媒体查询

@media only screen and (max-width : 900px)  {
.topBarBox{
     background-color:blue;
  }
}

Answer 2

您忘记了“唯一”关键字。将其更改为：

@media only screen and (max-width: 900px)  {
.topBarBox {
     background-color:blue;
  }
}

Answer 3

请确保您的HTML页面在<meta name="viewport" content="width=device-width, initial-scale=1">部分中有以下行：

<!DOCTYPE html>

此外，<html>位于.topBarBox{ background-color:black; } @media (max-width: 900px) { .topBarBox{ background-color:blue; } }部分之上。

这适用于：

html

此外，请确保body或body, html { width: 1000px; }中的任何一个都没有任何固定宽度，如：

body, html {
   width: 100%;
}

如果有任何CSS样式，请将其删除或更改为：

http POST

Answer 4

这对我来说很好：

<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    .topBarBox {
      background-color: black;
    }
    @media screen and (max-width: 900px) {
      .topBarBox {
        background-color: blue;
      }
    }
  </style>
</head>
<body>
  <div class="topBarBox">
    Hello
  </div>
</body>

</html>

也许你的CSS中有一些样式可以覆盖这些样式？

您可以尝试使用web-inspector，这应该清楚明白。

示例：

＆＃13;
＆＃13;
.topBarBox { background-color: black; } @media screen and (max-width: 900px) { .topBarBox { background-color: blue; } }
＆＃13;
<div class="topBarBox"> Hello </div>
＆＃13;
＆＃13;
＆＃13;

按媒体屏幕宽度的CSS视图

4 个答案: