我做了这个
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个盒子组成,中间有文字.
我已经做了这样的框,所以他们将调整大小,屏幕调整大小,所以它将一直保持在同一个地方.
然而,文本不会调整大小 – 即使我使用百分比.
>如何调整文本大小,使其始终与整个页面的比例相同？
这是处理多种分辨率的正确解决方案吗？或者我应该在css中有很多@media检查,并且每种媒体类型都有很多布局？
解决方法
关于你的代码,请参阅@Coulton.您需要使用JavaScript.
检查FitText(它在IE工作,他们只是在某种程度上打了他们的网站)或BigText.
FitText将允许您缩放与其所在容器相关的文本,而BigText更多的是将不同的文本部分调整为容器内相同的宽度.
BigText将您的字符串设置为容器的宽度,而FitText的像素完美.首先将font-size设置为容器元素宽度的1/10.默认情况下,所有字体都不会很好地工作,但它具有一个设置,可以减小或增加重新设置的“电源”.它还允许您设置最小和最大字体大小.第一次工作需要一点点工作,但做得很好.
http://marabeas.io< - 现在玩它.据我所知,BigText根本无法在我的上下文中工作. 对于那些使用Angularjs的人来说,这是我制作的FitText的Angular version.
这是一个LESS mixin,你可以用来使@ humanityANDpeace的解决方案更漂亮一点：
@mqIterations: 19;
.fontResize(@i) when (@i > 0) {
@media all and (min-width: 100px * @i) { body { font-size:0.2em * @i; } }
.fontResize((@i - 1));
}
.fontResize(@mqIterations);
和一个SCSS版本感谢@NIXin！
$mqIterations: 19;
@mixin fontResize($iterations) {
$i: 1;
@while $i <= $iterations {
@media all and (min-width: 100px * $i) { body { font-size:0.2em * $i; } }
$i: $i + 1;
}
}
@include fontResize($mqIterations);
