изменить размер шрифта в соответствии с размером div
мы сделали этоjsfiddle
HTML:
header
<p>not a lot of text here but still overflowing</p>
с помощью 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 коробок, с серединой на нем есть текст. Я 'Мы сделали так, чтобы ящики изменяли размеры экрана вместе с изменением размера экрана, чтобы он всегда оставался в одном и том же месте.
Текст, однако, неизменить размер - даже когда я использую процент.
Как изменить размер текста, чтобы он всегда был одинаковым по отношению ко всей странице?Это правильное решение для обработки нескольких разрешений? или я должен иметь много проверок @media в css и иметь много макетов для каждого типа медиа?