html字体根据宽度自动调整 css – 根据div大小调整字体大小

我做了这个

jsfiddle

html：

header

not a lot of text here but still overflowing

用css：

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

}

​

它由9个盒子组成,中间有文字.

我已经做了这样的框,所以他们将调整大小,屏幕调整大小,所以它将一直保持在同一个地方.

然而,文本不会调整大小 – 即使我使用百分比.

>如何调整文本大小,使其始终与整个页面的比例相同？

这是处理多种分辨率的正确解决方案吗？或者我应该在css中有很多@media检查,并且每种媒体类型都有很多布局？