リサイズ（CSS）後にコンテナの幅に相対的なフォントサイズを保持する方法を教えてください。

"vw"ユニットを使用して、コンテナの幅に関連するフォントサイズを定義しています。これはむしろ大丈夫ですが、私は結果に完全には満足していません。私に説明させてください...リサイズ（CSS）後にコンテナの幅に相対的なフォントサイズを保持する方法を教えてください。

以下のコードは、コンテナの周りにボックスを生成します。ボックス内には、背景が灰色のテキストがあります。

これを私のコンピュータの全画面ブラウザに表示すると、テキストがコンテナの幅を塗りつぶします。しかし...私はそれがこのリクに見える画面の約半分の幅にブラウザのサイズを変更すると

：それはこのようになります

テキストサイズは、コンテナとグレーの相対よりも減少しています - テキストコンテナ。私は "vw"ユニットの仕組みを誤解しているかもしれません。どのように私はより良い方法で相対的なフォントサイズを保持する必要があります誰も説明できますか？私の目標は、デスクトップ環境とモバイル環境の両方で似たように見えるということです。私はあなたのコードを変更した

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <!-- Custom styles --> 
    <style> 
     .container { 
      border-style: solid; 
     } 
     .relative-text { 
      font-family: helvetica, arial, sans-serif; 
      font-size: 2.5vmax; 
      background-color: #DDD; 
     } 
    </style> 
</head> 

<body> 
    <div class="container"> 
     <div class="relative-text text-center">&lt;== This text is resized when window is resized ==&gt;</div> 
    </div> 
</body> 
</html>

出典

2017-07-31 Gowire

vmaxの代わりにvwを使用できます。 https://css-tricks.com/viewport-sized-typography/ –

こちらをご覧ください。https://stackoverflow.com/questions/16056591/font-scaling-based-on-width -of-container –

はあなたが

.relative-text { 
 
    font-family: helvetica, arial, sans-serif; 
 
    font-size: 3vw; 
 
    background-color: #DDD; 
 
    border-style: solid; 
 
    text-align:center; 
 
}

<div class="relative-text text-center">&lt;== This text is resized when window is resized ==&gt;</div>

出典

2017-07-31 11:37:37

はい、それは動作します...うーん、それは問題を引き起こすブートストラップ "コンテナ"クラスの何かである可能性がありますか？私はあなたがそれを残しているのを見る... – Gowire

小さなデバイスのコンテナの幅は100％ –

必要なものをこれですあなたの問題は、ブートストラップコンテナクラスのメディアquerysから来ているとのdivを削除しますコンテナクラス。

出典

2017-07-31 12:44:24

リサイズ（CSS）後にコンテナの幅に相対的なフォントサイズを保持する方法を教えてください。

答えて

関連する問題