字体大小响应 DIV 大小

Question

我正在创建一个页面，其中有一些元素，它们可以隐藏也可以不隐藏。我想知道是否可以根据我的 div?

调整我的字体大小

例如，当我显示 2 个元素时，我希望我的文字比显示 5 个元素时更大，这样我的文字会更适合 space。

我的 JavaScript 代码，定义元素是否隐藏。

var val_kpi = $("#t3_teste_B_kpi").text();
var val_kpi_clean = Number(val_kpi.replace(/[^0-9.-]+/g,""));

if (val_kpi_clean != null && val_kpi_clean != 0){
    $("#t3_teste_B").css("display", "");
}else{
    $("#t3_teste_B").css("display", "none");
}

.tier3_test{
    width:50%;
    min-height: 100px;
    height: auto;
    margin-right: 2.5px ;
    
    /*Configurações Visuais */
    background: #FFF;
    
    /*Configurações da Borda */
    border: 5px solid;
    border-image-slice: 1;
    /* border-radius: 30px 30px 30px 30px; */
    border-image-source: linear-gradient(to left, #2B6640, #66B512);
}
    
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
    
.tier3_in{
    margin: 10px 5px 10px 5px;
    width:100%;
}
    
    
.kpititle3{
    font-weight: bold;
    color: #000;
    font-size: calc(8px + (12 - 8) * ((100vw - 300px) / (1600 - 300)));
}
    
    
.kpitext3 {
    font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
    font-weight: bold;
}
    
    
.no-wrap{
    white-space: nowrap;
}

<div class="tier3_test flex-center">
    <div class="tier3_in" id="t3_teste_A">
      <span class="kpititle3">A</span>
      <p><span class="kpitext3" id="t3_teste_A_kpi">VALOR 1</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_B">
      <span class="kpititle3">B</span>
      <p><span class="kpitext3" id="t3_teste_B_kpi">VALOR 2</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_C">
      <span class="kpititle3">C</span>
      <p><span class="kpitext3" id="t3_teste_C_kpi">VALOR 3</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_D">
      <span class="kpititle3">D</span>
      <p><span class="kpitext3" id="t3_teste_D_kpi">VALOR 4</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_E">
      <span class="kpititle3">E</span>
      <p><span class="kpitext3" id="t3_teste_E_kpi">VALOR 5</span></p>
    </div>
</div>

我得到的结果：

我想要的结果：

Answer 1

在您的 javascript 中，只需将两个 extra-classes（.big-font 和 .small-font）中的一个添加/删除到包装器 div（.tier-3-test) 是否删除其元素的函数。在你的 css 中，然后你定义一个 font-size 用于额外的 class 1，如果包装器 div 包含所有 5，则添加它，另一个 font-size 用于额外的 class 2 如果 wrapper div 包含较少的 div 则添加 2，或多或少像这样：

.big-font {
  font-size: 30px;
}

.small-font {
  font-size: 20px;
}

Answer 2

没有办法使用简单的 CSS 来做到这一点。

Chris Coyier 在 CSS-Tricks explains the best solutions，所有人都使用 javascript。但是，您自己弄清楚是没有意义的 - Coyier 讨论了一些可以为您完成这项工作的 already-written 库。

下面是使用您的代码和第一个此类库的示例：Dave Rupert 的 FitText 库。点击按钮看看删除三个div后会发生什么。

jsFiddle Demo (StackSnippets not working at the moment)

var grow_factor = $('.tier3_in').length / 2;
$('.tier3_test').fitText( grow_factor );

/* Below is just to remove divs for demo... */
$('button').click(function(){
   $('#t3_teste_C, #t3_teste_D, #t3_teste_E').remove();
   var grow_factor = $('.tier3_in').length / 2;
   $('.tier3_test').fitText( grow_factor );
});

.tier3_test{
    width:50%;
    min-height: 100px;
    height: auto;
    margin-right: 2.5px ;
    
    /*Configurações Visuais */
    background: #FFF;
    
    /*Configurações da Borda */
    border: 5px solid;
    border-image-slice: 1;
    /* border-radius: 30px 30px 30px 30px; */
    border-image-source: linear-gradient(to left, #2B6640, #66B512);
}
    
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
    
.tier3_in{
    margin: 10px 5px 10px 5px;
    width:100%;
}
    
    
.kpititle3{
    font-weight: bold;
    color: #000;
}
    
.no-wrap{
    white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.fittext.js"></script>

<div class="tier3_test flex-center">
    <div class="tier3_in" id="t3_teste_A">
      <span class="kpititle3">A</span>
      <p><span class="kpitext3" id="t3_teste_A_kpi">VALOR 1</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_B">
      <span class="kpititle3">B</span>
      <p><span class="kpitext3" id="t3_teste_B_kpi">VALOR 2</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_C">
      <span class="kpititle3">C</span>
      <p><span class="kpitext3" id="t3_teste_C_kpi">VALOR 3</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_D">
      <span class="kpititle3">D</span>
      <p><span class="kpitext3" id="t3_teste_D_kpi">VALOR 4</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_E">
      <span class="kpititle3">E</span>
      <p><span class="kpitext3" id="t3_teste_E_kpi">VALOR 5</span></p>
    </div>
</div>
<button>Remove 3 Divs</button>

字体大小响应 DIV 大小

Font-Size Responsive to DIV Size

html

css

responsive

font-size