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

Answer 2

に割り当てられているあなたは（この場合bodyのように）media queryに特定の要素のCSSを定義する必要があります。ここにはdemoがあります。

これを試してみてください：

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) { 
    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; 
    } 
    } 

Answer 3

@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; } 
} 

スタイルだけ体またはいずれかのクラスに適用することができますonlly