real-time updating screen by media query

I was expecting that my web would change when screen size changes like I coded below

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

@media (min-width: 900px) {
  .container {
    max-width: 870px;
  }
}

@media (min-width: 600px) {
  .container {
    max-width: 570px;
  }
}

But it doesn't work. I shrank browser size, looking closely at the screen size's change with developer tool. I thought screen would be updated according to the media queries when screen size reaches the break points.

It works only once when loading the document.

What should I do to do this as a real-time? should I use some script?

Solution

The problem is the rules. When browser reaches 1200px, it qualifies for all 3 rules. http://jsfiddle.net/jonms83/5q6etqex/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {background-color:black;}
@media all and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}
@media all and (max-width: 1199px) and (min-width: 601px){
  .container {
    max-width: 870px;
  }
}

@media all and (max-width: 600px) {
  .container {
    max-width: 570px;
  }
}
</style>
</head>

<body>
<div class="container">&nbsp;</div>
</body>
</html>