title: @media screen css property only read two rules
body: <pre><code>@media only screen and (max-width:400px) 
  {/***style****/}
  
  @media only screen and (min-width:400px) and (max-width:700px) 
  {/***style****/}
  
  @media only screen and (max-width:700px) 
  {/***style****/}
  </code></pre>
  
  <p>The media in the middle doesn't respond. Why?</p>