我做了这个
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检查,并且每种媒体类型都有很多布局?