css - real-time updating screen by media query -

I was hoping that when my screen changes like the screen resizes, my web will change

  @ media (minimum-width: 1200 px) {container {max-width: 1170px; }} @ Media (minimum-width: 900px) {container {max-width: 870px; }} @ Media (minimum-width: 600px) {. Container {max-width: 570px; }}  

But it does not work. I reduced the size of the browser, looking closely at the screen size changes with the developer tool. I thought the screen will be updated according to the media queries, when the screen size will reach the break point.

This works only once when loading the document.

What should I do to do a real time? Should I use some script? The problem is when the browser reaches 1200px, it passes all 3 rules

  & lt ;; Doctype html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; Untitled document & lt; / Title & gt; & Lt; Style & gt; .container {background-color: black;} @ Media All and (Minimum Width: 1200px) {. Container {max-width: 1170px; }} @ Media all and (max-width: 1199 px) and (minimum-width: 601 px) {container {max-width: 870px; }} @ Media All and (max-width: 600px) {. Container {max-width: 570px; }} & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "container" & gt; & Amp; Nbsp; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;