title: Resize font-size according to div size
body: <p>It is made of 9 boxes, with the middle on has text it in.
  I've made it so the boxes so they will resize with the screen resize so it will remain in the same place all the time.</p>
  
  <p>The text, however, doesn't resize - even when I use percentage.</p>
  
  <ol>
  <li>How do I resize the text so it will always be the same ratio from the entire page?</li>
  <li>Is this a proper solution to handle multiple resolutions? or should I have many <code>@media</code> checks in the CSS and have many layouts for each media types?</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    width: 100%;
  }
  
  #launchmain {
    width: 55%;
    display: inline-block;
    position: relative;
    top: 10%;
    left: 25%;
  }
  
  #launchmain:after {
    padding-top: 79.26%;
    display: block;
    content: '';
    margin-top: 10px;
  }
  
  #box1 {
    border: 1px solid #000000;
    position: absolute;
    width: 25.37%;
    height: 21.88%
  }
  
  #box2 {
    border: 1px solid #000000;
    width: 48.48%;
    height: 21.88%;
    position: absolute;
    left: 25.64%
  }
  
  #box3 {
    border: 1px solid #000000;
    width: 25.37%;
    height: 21.88%;
    position: absolute;
    left: 74.39%;
  }
  
  #box4 {
    border: 1px solid #000000;
    width: 33.235%;
    height: 53.84%;
    position: absolute;
    top: 22.07%;
  }
  
  #maininvite {
    border: 1px solid #000000;
    width: 33.53%;
    height: 53.84%;
    position: absolute;
    top: 22.07%;
    left: 33.235%;
  }
  
  #box6 {
    border: 1px solid #000000;
    width: 33.235%;
    height: 53.84%;
    position: absolute;
    top: 22.07%;
    left: 66.765%;
  }
  
  #box7 {
    border: 1px solid #000000;
    width: 25.37%;
    height: 21.88%;
    position: absolute;
    top: 76.2%;
  }
  
  #box8 {
    border: 1px solid #000000;
    width: 48.48%;
    height: 21.88%;
    position: absolute;
    left: 25.64%;
    top: 76.2%;
  }
  
  #box9 {
    border: 1px solid #000000;
    width: 25.37%;
    height: 21.88%;
    position: absolute;
    top: 76.2%;
    left: 74.39%;
  }
  
  #maininvite h2 {
    font-size: 180%;
  }
  
  p {
    position: relative;
    font-size: 80%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="launchmain"&gt;
    &lt;div id="box1"&gt;&lt;/div&gt;
    &lt;div id="box2"&gt;&lt;/div&gt;
    &lt;div id="box3"&gt;&lt;/div&gt;
    &lt;div id="box4"&gt;&lt;/div&gt;
    &lt;div id="maininvite"&gt;
      &lt;h2&gt; header&lt;/h2&gt;
      &lt;p&gt;not a lot of text here but still overflowing&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="box6"&gt;&lt;/div&gt;
    &lt;div id="box7"&gt;&lt;/div&gt;
    &lt;div id="box8"&gt;&lt;/div&gt;
    &lt;div id="box9"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>