title: Why does media query not change font-size in this example?
body: <p>I have read through related questions and still not found an answer. I've tried to simplify as much as possible and still get unexpected results.</p>
  
  <p>My media query does not change the font-size of the  element, though it will change the color no problem. Can anyone explain this behavior?</p>
  
  <p>eg.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;DISOBEDIANT HEADER&lt;/title&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"/&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;
  
  &lt;style type="text/css"&gt;
  
     @media all and (max-width: 400px) {
          h1 {
              color: blue;
              font-size:26px;
          }
      }
  
     h1 {
         font-size: 56px;
     }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;h1&gt;DISOBEDIENT HEADER&lt;/h1&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>