Resize font-size according to div size [duplicate]

Question

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.

The text, however, doesn't resize - even when I use percentage.

1. How do I resize the text so it will always be the same ratio from the entire page?
2. Is this a proper solution to handle multiple resolutions? or should I have many @media checks in the CSS and have many layouts for each media types?

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%;  }

<div id="launchmain">    <div id="box1"></div>    <div id="box2"></div>    <div id="box3"></div>    <div id="box4"></div>    <div id="maininvite">      <h2> header</h2>      <p>not a lot of text here but still overflowing</p>    </div>    <div id="box6"></div>    <div id="box7"></div>    <div id="box8"></div>    <div id="box9"></div>  </div>

Answer 1

My answer does not require Javascript and only relies on CSS3 (available in most modern browsers). I personally like it very much if design is not relying on Javascript too much.

My answer is a "pure CSS3 , no Javascript required"-solution:

The solution as can be seen here (http://jsfiddle.net/uNF3Z/16/) uses the following additions to the CSS styles (which make use of the @media query of CSS3 which)

@media all and (min-width: 50px)   {  body  { font-size:0.1em;  } } @media all and (min-width: 100px)  {  body  { font-size:0.2em;  } } @media all and (min-width: 200px)  {  body  { font-size:0.4em;  } } @media all and (min-width: 300px)  {  body  { font-size:0.6em;  } } @media all and (min-width: 400px)  {  body  { font-size:0.8em;  } } @media all and (min-width: 500px)  {  body  { font-size:1.0em;  } } @media all and (min-width: 600px)  {  body  { font-size:1.2em;  } } @media all and (min-width: 700px)  {  body  { font-size:1.4em;  } } @media all and (min-width: 800px)  {  body  { font-size:1.6em;  } } @media all and (min-width: 900px)  {  body  { font-size:1.8em;  } } @media all and (min-width: 1000px) {  body  { font-size:2.0em;  } } @media all and (min-width: 1100px) {  body  { font-size:2.2em;  } } @media all and (min-width: 1200px) {  body  { font-size:2.4em;  } } @media all and (min-width: 1300px) {  body  { font-size:2.6em;  } } @media all and (min-width: 1400px) {  body  { font-size:2.8em;  } } @media all and (min-width: 1500px) {  body  { font-size:3.0em;  } } @media all and (min-width: 1500px) {  body  { font-size:3.2em;  } } @media all and (min-width: 1600px) {  body  { font-size:3.4em;  } } @media all and (min-width: 1700px) {  body  { font-size:3.6em;  } } 

What this in effect causes is that the font-size is adjusted to the available screen width. This adjustment is done in steps of 100px (which is finegrained enough for most purposes) and covers a maximum screen width of 1700px which I reckon to be amply (2013) and can by adding further lines be further improved.

A side benefit is that the adjustment of the font-size is occuring at each resize. This dynamic adjustment (because for instance the browser windows is resized) might not yet be covered by the Javascript based solution.