HTML5 & CSS @media only screen and

Question

我正在尝试将@media only screen 和 (max-width: 600px) 但没有任何反应。我尝试了一些简单的东西，只是为了看看它是否有效，改变了背景，但什么也没有。

我需要在 HTML 中写入任何内容才能正常工作吗？？

**{
    box-sizing: border-box;
}
@media only screen and (max-width: 600px) {
    body {
      background-color: lightblue;
    }
  }
body{
    background-color:yellow;
}**

甚至尝试过但它在底部但没有...

Answer 1

媒体查询必须写在属性您要做出响应之后。在这种情况下，先编写正文代码，然后再编写媒体查询。

这就是例子

body {
    background-color: yellow;
}
@media only screen and (max-width: 600px) {
    body {
        background-color: red;
    }
}

Answer 2

添加到此线程的其他答案中，您可能需要在媒体查询中包含 body 的重要标记。它必须覆盖上面的主要 body 样式。

因此它应该如下所示：

body {
    background-color: yellow;
}

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue !important;
    }
}

以上意味着您的 body 在宽度为 LARGER[=21] 的设备上将具有 background-color 的黄色 =] 小于 600px，并且 body background-color 在宽度 SMALLER 小于 600px 的设备上将是 lightblue。

Answer 3

由于 specificity of the rules.

，您可能看不到更改

也就是你的写法：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

body {
    background-color: yellow;
}

这两个具有相同的特异性，这意味着 last 规则是显示的内容。

因此，即使您的屏幕尺寸小于 600px，也会显示 background-color: yellow。

相反，您应该定义非媒体查询规则 first，然后是媒体查询规则 second.

试试这个：

body {
  background-color: yellow;
}
    
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

HTML5 & CSS @media only screen and

HTML5 & CSS @media only screen and

html

css

media