如何根据div大小缩放字体大小？

Question

如何根据字符数和panel-default大小增长/缩小font-size？例如，很多字符意味着font-size会更小，或者更小的屏幕也意味着更小的font-size。 font-size应该适合div。

CSS

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 

body { 
    margin: 0 
} 

.testing-here { 
    font-size: 0; 
} 

.panel-default { 
    box-sizing: border-box; 
    border-style: none; 
    position: relative; 
    width: 50%; 
    padding-bottom: 40%; 
    overflow: hidden; 
    background-color: #446CB3; 
    border-radius: 0; 
    display: inline-block; 
    margin-bottom: 0px; 
    border: 2.5px white solid; 
} 

.panel-body { 
    color: white; 
    text-align: center; 
    position:absolute; 
    font-size: 16px; 
} 

HTML

<div class="testing-here"> 
    <div class="panel panel-default"> 
    <div class="panel-body"> 
     Basic panel example 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-body"> 
     Basic panel example 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-body"> 
     Basic panel example 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-body"> 
     Basic panel example 
    </div> 
    </div> 
</div> 

有没有办法做到这一点没有JavaScript的？

Answer 1

如果您的面板从窗口width大小，你可以使用vw单位（与所有的烦恼与未来：太大或太小，无法阅读）

您可以添加媒体查询，以保持font-size最小值和最大值内尺寸。

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
.testing-here { 
 
    font-size: 0; 
 
} 
 
.panel-default { 
 
    box-sizing: border-box; 
 
    border-style: none; 
 
    position: relative; 
 
    width: 50%; 
 
    padding-bottom: 40%; 
 
    overflow: hidden; 
 
    background-color: #446CB3; 
 
    border-radius: 0; 
 
    display: inline-block; 
 
    margin-bottom: 0px; 
 
    border: 2.5px white solid; 
 
} 
 
.panel-body { 
 
    color: white; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    font-size: 5vw; 
 
    /* will be 5% of window's width so 10% of panel's width */ 
 
} 
 
@media (min-width: 1000px) { 
 
    .panel-body { 
 
    font-size: 50px; 
 
    } 
 
} 
 
@media (max-width: 320px) { 
 
    .panel-body { 
 
    font-size: 16px; 
 
    } 
 
}

<div class="testing-here"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     Basic panel example show me full page & resize window 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     Basic panel example font-size kept in between 16 and 50px max 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     Basic panel example 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     Basic panel example 
 
    </div> 
 
    </div> 
 
</div>

您也可以使用媒体查询，以保持字体可读或仅媒体查询在不同的破发点