CSS Layout How to - Increase or decrease the window size to see the background color change

Question

We would like to know how to increase or decrease the window size to see the background color change.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
p {<!--   w  w  w  .ja  va2 s. c o m-->
  font-size: 13px;
  font-color: black;
}
h1 {
  font-size: 30px;
}

@media screen and (min-width:761px) {
  body {
    background-color: white;
  }
  h1 {
    color: red;
  }
}

@media screen and (max-width:760px) {
  body {
    background-color: #333;
  }
  h1 {
    color: red;
  }
  p {
    color: white;
  }
}

@media screen and (max-width:480px) {
  body {
    background-color: #807f83;
  }
  h1 {
    color: white;
  }
  p {
    color: white;
  }
}

@media screen and (max-width:360px) {
  body {
    background-color: #0096d6;
  }
  h1 {
    color: white;
    font-size: 25px;
  }
  p {
    color: white;
  }
}
</style>
</head>
<body>
  <h1>Media Queries Examples</h1>
  <p>Increase or decrease the size of your window to see the
    background color change</p>
</body>
</html>

The code above is rendered as follows: