title: Media query not working in css file
body: <p>I am trying to use media query to make width of divs 100% for smaller screen. Yet, media query does not seem to work on my css file. Part of the code of my css file is as follows:</p>
  
  <pre><code>@media all and (max-width: 500px) {
      body {
          background-color:lightblue;
      }
  }
  @media all and (min-width: 500px) {
      body {
          background-color:red;
      }
  }
  </code></pre>
  
  <p>However, no change in background-color can be seen. When I put media query on html file, it seems to work.</p>
  
  <pre><code>&lt;link rel="stylesheet" &lt;!-- media="only screen and (max-device-width: 480px)"  --&gt;type="text/css" href="dec.css"&gt;
  </code></pre>
  
  <p>But when I put the code on css file, it just does not work. I am using IE 11 for test. Could anyone tell me the reason?</p>