title: Change font size depending on resolution
body: <p>I'm developing a Web page that uses different sizes for its different paragraphs, h... and so on. I'm using <b>em</b> sizes: <b>font-size: 2em;</b>, as an example. But when I change my screen resolution to a lower one, I want that size to a smaller one. </p>
  
  <p>For that purpose, I tried this code:</p>
  
  <pre><code>&lt;script&gt;
          if ( screen.width &gt; 1600)
          {
              document.write('&lt;style&gt;#centered h1 { font-size: 2em; } &lt;/style&gt;');
          }
          else if (screen.width &lt;= 1600 &amp;&amp; screen.width &gt;= 1360)
          {
              document.write('&lt;style&gt;#centered h1 { font-size: 1.7em; } &lt;/style&gt;');
          }
          else if (screen.width &lt; 1360 &amp;&amp; &gt;= 1024)
          {
              document.write('&lt;style&gt;#centered h1 { font-size: 1.4em; } &lt;/style&gt;');
          }
          else
          {
              document.write('&lt;style&gt;#centered h1 { font-size: 0.8em; } &lt;/style&gt;');
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>First: it doesn't work... <br/>
  Second: I think there should be  cleaner way to do so...</p>
  
  <p>So, the question is: how to use different sizes to my fonts or how to make them adjust for different resolutions?</p>
  
  <p>Can anyone help please? Thanks!</p>