HTML5 和 CSS @media 仅屏幕和

如何解决HTML5 和 CSS @media 仅屏幕和

我正在尝试放入@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;
}**

甚至试图但它在底部但没有...

解决方法

媒体查询必须写在您要进行响应的属性之后。在这种情况下，首先编写 body 代码，然后编写媒体查询。

这是例子

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

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

所以它应该如下所示：

body {
    background-color: yellow;
}

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

以上意味着在宽度LARGER 600px以上的设备上，您的正文的背景色为黄色，正文的背景色为黄色 strong>浅蓝色，适用于宽度SMALLER 小于 600 像素的设备。

由于 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;
  }
}