html - HTML5 和 CSS @media 仅屏幕和

Question

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

我需要用 HTML 写任何东西才能让它工作吗？

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

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

标签： htmlcssmedia

Answer 1

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

所以它应该如下所示：

body {
    background-color: yellow;
}

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

上面的意思是在宽度大于600px的设备上，你的 body 的背景色是黄色，而在宽度小于 600px 的设备上， body背景色是浅蓝色。