Ändern der Hintergrundfarbe basierend auf der Browsergröße in CSS

Question

Ich kann nicht herausfinden, was mit diesem Code falsch ist. Die Hintergrundfarbe ändert sich nicht, sie bleibt nur die ganze Zeit weiß.

<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

Versuchen:

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

Die background-color Eigenschaft nun auf die zugeordneten body

Answer 2

Sie müssen die CSS für bestimmtes Element in media query (wie in diesem Fall body) definieren. Hier ist ein demo.

Versuchen Sie folgendes:

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

Styles kann nur anwendbar auf den Körper oder jede Klasse onlly