html - 在 CSS 中根据浏览器大小更改背景颜色

Question

我不知道这段代码有什么问题。背景颜色根本没有改变，它一直保持白色。

<style type="text/css">
      h1 {
        position: absolute;
        text-align: center;
        width: 100%;
        font-size: 6em;
        font-family: Roboto;
        transition: all 0.5s;
      }

      @media screen and (min-width: 0px) and (max-width: 400px) {
        background-color: red;
      }
      @media screen and (min-width: 401px) and (max-width: 599px) {
        background-color: green;
      }
      @media screen and (min-width: 600px) {
        background-color: blue;
      }
    </style>

Answer 1

尝试:

@media screen and (min-width: 0px) and (max-width: 400px) {
    body { background-color: red; }
}
@media screen and (min-width: 401px) and (max-width: 599px) {
    body { background-color: green; }
}
@media screen and (min-width: 600px) {
    body { background-color: blue; }
}

background-color 属性现在分配给 body