DivとTextを合わせて、比率を維持します。

Question

div内にヘッダーがあります。 divはブラウザでサイズ変更されますが、テキストは同じサイズのままで、サイズが適切に変更されません。

.header { 
 
     min-width:100%; 
 
    \t min-height:13%; 
 
    \t position: fixed; 
 
    \t margin:auto; 
 
    \t top: 0; 
 
    \t z-index: 1; 
 
    \t background: rgb(0, 0, 0); 
 
    \t background: rgba(0, 0, 0, 0.7); 
 
    } 
 
    
 
    .headerTitle { 
 
    \t left: 0; 
 
    \t width:100%; 
 
    \t height:100%; 
 
    \t position: absolute; 
 
    \t color:black; 
 
    \t font: bold 24px/45px Helvetica, Sans-Serif; 
 
    \t letter-spacing: -1px; 
 
    \t margin-left: 3%; 
 
    \t font-size: 500%; 
 
    }

<div id="homepageHeader" class="header"> 
 
\t \t <h1 id="homepageHeaderTitle" class="headerTitle">Text Here</h1> 
 
\t \t <!-- insert menu buttons here --> 
 
\t </div>

Answer 1

あなたはテキストが応答拡張したい場合は、viewport unitsを使用してフォントサイズを定義しようとは：ビューポートの

.headerTitle { 
    font-size: 2vw; 
} 

この方法でフォントサイズがします常に等しい2％幅。

ます。またcalc()で混合することによって、「最小フォントサイズ」のようなものを提供することができます：

.headerTitle { 
    font-size: calc(0.5em + 2vw); 
} 

---

私もあなたがここに掲載何を超えた何かがありますしない限り、あなたはheaderTitleからposition: absoluteを削除することをお勧めそれが必要です。その後、容器からmin-heightを取り除いて、自然に大きさを変えることができます。特定の理由がある場合を除いて、要素を配置しないでください。そうしないと、あらゆる種類の奇妙なケースに遭遇します。