CSS Layout How to - Test css media queries

Question

We would like to know how to test css media queries.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@media screen and (max-width: 299px) { /*page <= 299px, less than 300*/
  body {<!--from w w w.j ava  2 s. co m-->
    background-color: #ff0;
  }
}

@media screen and (min-width: 300px) and (max-width: 399px) {
  /*page is 300 to 399px*/
  body {
    background-color: #f00;
  }
}

@media screen and (min-width: 400px) and (max-width: 499px) {
  /*page is 400 to 499px*/
  body {
    background-color: #0f0;
  }
}

@media screen and (min-width: 500px) { /*page >= 500 px*/
  body {
    background-color: #00f;
  }
}

h1 {
  font: normal normal bold 24pt Verdana;
  color: #fff;
  text-shadow: #000 1px 1px 0px;
}
</style>
</head>
<body>
  <h1>resize me</h1>
</body>
</html>

The code above is rendered as follows: