web-dev-qa-db-ja.com

HTML / CSS-親の高さと幅を埋めるようにフォントサイズを調整します

ブラウザウィンドウのサイズが変更されるとサイズが変更される<div>要素があります。

<div>の中に、テキストの段落があります。

<div style="width:80%; height:80%; margin:10%;">
    <p>Paragraph of text. Paragraph of text. Paragraph of text.</p>
</div>

font-sizeのサイズを変更するときにテキストを<div>に変更して、テキストが使用可能なスペースの100％を占めるようにします。

どうすればこの効果を達成できますか？
フォントサイズのパーセンテージでしょうか？
Javascriptを使用する必要がありますか？

前もって感謝します！

javascripthtmlcssfont-size
15
Web_Designer

このためのjqueryプラグインがあります： http://fittextjs.com/

8
Bas

必要なものはvwと呼ばれます。例[〜＃〜] css [〜＃〜]：font-size: 80vw;。 vwはビューアポートの幅を意味し、80vw = 80%デバイスの画面幅

2
Zefir Zdravkov

Cssのvwプロパティを確認してください

http://www.w3schools.com/cssref/css_units.asp

2
Nick

HTML

<div id="change" style="margin:10%;"> 
    <p>Paragraph of text. Paragraph of text. Paragraph of text.</p> 
</div>

CSS

#change { 
    width: 80%; 
    height: 80%; 
    border: 1px solid black; 
    overflow: hidden; 
    font-size: 1em; 
}

JAVASCRIPT

$(function() { 
    while( $('#change div').height() > $('#change').height() ) { 
        $('#change div').css('font-size', (parseInt($('#change div').css('font-size')) - 1) + "px" ); 
    } 
});
1
Jawad

fittext.jsは私にとって正しく機能しませんでした（jQueryのプラグイン、および派生したjqueryフリーバージョン）、またはコンプレッサー属性を使用しても、別の解決策を見つけました：

http://www.dhtmlgoodies.com/?whichScript=text_fit_in_box（誰か別の作品）

これは私にとって完璧に機能します-長いテキストと短いテキスト。

ウィンドウのサイズ変更には反応しないため（ページの読み込み時に1回だけ機能します）、各ウィンドウのサイズ変更後に自動的に実行するようにこの短いコードを記述しました（私にとっては機能します）。

<script>
      function calculate_font_sizes()
      {
        fitTextInBox('login-h1');
        fitTextInBox('subtittle');
      }
      calculate_font_sizes();
      window.addEventListener('resize', calculate_font_sizes);

</script>

それが誰かに役立つことを願っています。

0
Martin Adámek