css – 根据div大小调整字体大小

前端之家收集整理的这篇文章主要介绍了css – 根据div大小调整字体大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我做了这个 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);
原文链接:https://www.f2er.com/css/216751.html

猜你在找的CSS相关文章