Я сделал это jsfiddle
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>
с помощью 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 и иметь много макетов для каждого типа медиа?
