redimensionar tamanho da fonte de acordo com o tamanho div
Eu fiz issojsfiddle
o html:
<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>
com 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%;
}
É feito de 9 caixas, com o meio em texto. Eu fiz isso para que as caixas sejam redimensionadas com o redimensionamento da tela para que permaneça no mesmo lugar o tempo todo.
O texto, no entanto, não é redimensionado - mesmo quando eu uso porcentagem.
Como redimensiono o texto para que sempre seja a mesma proporção da página inteira?Esta é uma solução adequada para lidar com várias resoluções? ou devo ter muitas verificações @media no css e ter muitos layouts para cada tipo de mídia?