Resizable background color

<!DOCTYPE html>
<html lang=en>
<head>
<title>Resizable background color</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<style>

h1{display:none;}
@media all and (max-width:600px){
  body{background-color:red;  }
}
@media all and (min-width:600px) and (max-width:900px){
  body{background-color:green;  }
}
@media all and (min-width:900px) and (max-width:1200px){
  body{background-color:blue;  }
}
@media all and (min-width:1200px) and (max-width:1350px){
  body{background-color:black;  }
}
@media all and (min-width:1350px){
  body{background-color:white;  }
h1{display:block;width:200px;margin:200px auto;text-align:center;
        }
}

</style>
</head>
<body>

  <div><h1>White is the background default color for this page</h1></div>


</body>
</html>