CSS /ブートストラップのコンテナ幅に応じたラベルサイズ

Question

すべてのデバイス（画像のブロック2）に2行のラベルが必要です。いくつかの要件があります

• 最初の行は4つのラベルを有する
• 二列有する5つのラベル
• 第3のラベル（Demo Topic Text 1、Demo Topic Text 2、Demo Topic Text 3）最後の3つのラベルよりも1.5倍大きくなければなりません（Demo Topic Text 7,Demo Topic Text 8,Demo Topic Text 9）。
• ラベルDemo Topic Text 3、Demo Topic Text 4とDemo Topic Text 5は、私はCSS /ブートストラップを使用して、すべてのデバイスのためにこの問題を解決する方法がわからないDemo Topic Text 7、Demo Topic Text 8、Demo Topic Text 9.

よりも1.25倍大きくなるはずです。

HTMLコード：

<div class="container"> 
    <div class="row" id="ho_intro_content"> 
     <div class="col-xs-12"> 
     <div class="row"> 
      <div class="col-xs-12 text-center"> 
      <h1>Hello World!</h1> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 text-center"> 
      <div class="ho_in_featured_topics"> 
       <span class="label huge">Demo Topic Text 1</span> 
       <span class="label huge">Demo Topic Text 2</span> 
       <span class="label huge">Demo Topic Text 3</span> 
       <span class="label large">Demo Topic Text 4</span> 
      </div> 
      <div class="ho_in_featured_topics"> 
       <span class="label large">Demo Topic Text 5</span> 
       <span class="label large">Demo Topic Text 6</span> 
       <span class="label medium">Demo Topic Text 7</span> 
       <span class="label medium">Demo Topic Text 8</span> 
       <span class="label medium">Demo Topic Text 9</span> 
      </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 text-center">   
      <button type="button" class="btn btn-danger btn-lg" id="ho_in_click_me_button" aria-label="Click me!">Click me!</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

CSSコード：

​​

Answer 1

あなたは.labelクラスのfont-sizeの基準値を設定する必要があります。 継承を介してその値に基づいてスケールします。

文書内で最初にfont-sizeを使用するには、1remなどのrem unitsを使用します。

.ho_in_featured_topics .label { 
    font-size: 16px; 
} 
.ho_in_featured_topics .label.large { 
    font-size: 1.25em; 
} 
.ho_in_featured_topics .label.huge { 
    font-size: 1.5em; 
} 

Answer 2

これは数学的なものです。しかし、これは私が思いついたものです。

<div class="container-fluid bg-primary "> 
<div class="row" id="ho_intro_content"> 
    <div class="col-xs-12"> 
    <div class="row"> 
     <div class="col-xs-12 text-xs-center"> 
     <h1>Hello World!</h1> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 text-center"> 
     <div class="ho_in_featured_topics"> 
      <span class="label huge col-xs-3.1">Demo Topic Text 1</span> 
      <span class="label huge col-xs-3.1">Demo Topic Text 2</span> 
      <span class="label huge col-xs-3.1">Demo Topic Text 3</span> 
      <span class="label large col-xs-2.7">Demo Topic Text 4</span> 
     </div> 
     <div class="ho_in_featured_topics"> 
      <span class="label large col-xs-2.7">Demo Topic Text 5</span> 
      <span class="label large col-xs-2.7">Demo Topic Text 6</span> 
      <span class="label medium col-xs-2.2">Demo Topic Text 7</span> 
      <span class="label medium col-xs-2.2">Demo Topic Text 8</span> 
      <span class="label medium col-xs-2.2">Demo Topic Text 9</span> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 text-center">   
     <button type="button" class="btn btn-danger btn-lg text-xs-center" id="ho_in_click_me_button" aria-label="Click me!">Click me!</button> 
     </div> 
    </div> 
    </div> 
</div>