web-dev-qa-db-ja.com

親divに相対的なフォントサイズを作成する方法は？

Div内のテキストを、親divと%パーセント比で同じサイズのままにする必要があります。 I.E.テキストに親のdiv幅の50％のfont-sizeが必要です。そのため、ページサイズが変更されると、テキストは常に%の同じサイズのままになります。

ここに私が話していることがあります：

.counter-holder{
        display: block;
        position: absolute;
        width:90%;
        height:20%;
        top: 70%;
        left: 50%;
        /* bring your own prefixes */
        transform: translate(-50%, -50%);
}


.counter-element-box{
        position:relative;
        vertical-align: text-top;
        border-style: solid;
    border-width: 1px;
    width: 20%;
    height: 100%;
    float:left;
    margin: 6%;
}

.counter-element-text{
        position:absolute; 
        top:50%; 
        width: 50%;
        max-width:50%;
        display: inline-block;
        height:100%;
        margin-left:50%;
        font-size : 80%;overflow: hidden;
}

.counter-element-value{
        position:absolute; 
        top:50%; 
        width: 50%;
        max-width:50%;
        display: inline-block;
        height:100%;
        padding-left:30%;
        font-size : 80%;overflow: hidden;
}
<div class="counter-holder">
        <div class="counter-element-box">
                <div id="years" class="counter-element-value">
                        0
                </div>
                <div class="counter-text counter-element-text" >
                    Years
                </div> 
        </div>
        <div class="counter-element-box">
                <div id="missions" class="counter-element-value">
                        0  
                </div>
                <div class="counter-text counter-element-text" >
                    Missions
                </div>
        </div> 
        <div class="counter-element-box"> 
                  <div id="team" class="counter-element-value">
                           0 
                  </div>
                  <div class="counter-text counter-element-text" >
                        Team
                  </div>
        </div>                    
</div>

このスニペットを全画面で実行し、ページのサイズを変更して、テキストサイズがどのように変化し、divの境界内に収まらないかを確認してください。どうすればそれを防ぐことができますか？

cssfont-size
23
Tachi

この問題を解決する方法は、javascriptを使用してコンテナを測定し、そのコンテナのフォントサイズをpxで設定することでした。そのベースラインがコンテナに設定されると、すべてのコンテンツの相対的なフォントサイズがemまたは％を使用して正しくスケーリングされます。

私はReactを使用しています：

<div style={{ fontSize: width / 12 }} >
  ...
</div>

CSS：

div {
  font-size: 2em;
}
5
JamieR

レスポンシブスケーリングについて説明する場合、それを実装できますが、すべては達成しようとしているものに依存します。以下のコードでは、比率（高さ/幅= 1/2）でdivコンテナーを作成しました。ブラウザウィンドウのサイズを変更すると、コンテナとテキストが応答して拡大縮小されます。ウィンドウサイズに応じて、VW（ビューポートの幅）とVH（ビューポートの高さ）に応じてフォントが変更されます。新しいフォントサイズを追加するには、-vwに従って2回、-vhに従って2回設定する必要があります。 CSS変数（var）を使用しました。これにより、コードを理解しやすくなります。

例

body {
    background-color: #000;
    padding: 0;
    margin:0;
}

/* position element in the middle */
.middle {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 


/* Ratio: height/width */ 
:root {
    --ratio: 0.5;
    --reverse-ratio: 2;
    --container-width: 50vw;
    --container-height: 50vh;

    --font1-sizeVW: 15vh;
    --font1-sizeVH: calc(var(--ratio) * 15vw);

    --font2-sizeVW: 6vh;
    --font2-sizeVH: calc(var(--ratio) * 6vw);
}

#container {

    background-color: pink;
    width: var(--container-width);
    height: calc(var(--ratio) * var(--container-width));

    max-width: calc(var(--reverse-ratio) * var(--container-height));  
    max-height: var(--container-height);
}

#span1 {
    font-size: var(--font1-sizeVW);   
}

#span2 {
    font-size: var(--font2-sizeVW);  
}

/* max-width: (reversRatio * 100vh) */
@media all and (max-width: 200vh) {  

    #container {
        background-color: green;
    }

    #span1 {  
        font-size: var(--font1-sizeVH); 
    } 

    #span2 {  
        font-size: var(--font2-sizeVH);
    } 
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
    </style>
</head>
<body>
    <div id="container" class="middle">
        <span id="span1">Hello</span>
        <span id="span2">Hello again</span>
    </div>
</body>
</html>
1
slaviboy

レスポンシブフォントサイズ/ブラウザウィンドウに応じたテキストレスポンシブ：-

テキストサイズはvw単位で設定できます。これは、「ビューポートの幅」を意味します。

これにより、テキストサイズはブラウザウィンドウのサイズに従います。

例えば

<div>
<h2 style="font-size:10vw;">Ganesh Pandey</h2>
</div>

ブラウザウィンドウのサイズを変更して、テキストサイズのスケーリングを確認します。

0
Ganesh Pandey