CSS3またはJavaScriptのウィンドウのサイズ変更に比例してフォントサイズを変更する方法

Question

私はいくつかのWebアプリケーションを行います。font-sizeで問題があります。 font-sizeをCSS3またはjavascriptのウィンドウのサイズに比例して変更するにはどうすればよいですか？

Answer 1

あなたはそれを行うための3つの方法があります：http://fittextjs.com/を使用して

1. を、しかしページは、メディアを使用して
2. 遅くなるように始めることができますが、今

をEMSを使用して

を照会し、それが依存します最終結果になりたいもの オプション3に行きます。

Answer 2

、あなたが変更にメディアクエリを使用することができ、自分のページセットのフォントがemユニットを使用して1つの相対的なサイズの残りの部分でどこでも、その後pxであなたのベースフォントサイズ（あなたがCSSであなたのbody要素で定義1）を設定しますちょうどこのようなあなたのベースフォント、何かを変更することによって、すべてのページのフォントサイズ：

body { 
    font-size: 15px; 
} 
@media (max-width: 1000px) { 
    body { font-size: 1.3em; } 
} 
@media (max-width: 500px) { 
    body { font-size: 1.1; } 
} 

Answer 3

として定義されてvwユニットを、使用しているこれを行うための理想的な方法ビューポートの幅の100分の1/（したがって、名前）。

font-size: 4.5vw; 

...とは理論的に、動作するはずです：だから、例えば、場合、あなたのテキストはすべての回で、ブラウザの幅の4.5％になりたかった、あなたはサイズを使用することができます。残念ながら、期待どおりに動作しないことがわかります.WebKitブラウザには、少なくともフォントサイズの値がライブ更新されていないバグがあります（他のすべてのディメンションでも同様です）。あなたは、JavaScriptからz-indexプロパティを更新することにより行うことができ、フォントサイズが変更するために再描画をトリガする必要があります。

window.addEventListener('resize', function(){ 
    document.getElementById('myEl').style.zIndex = '1'; 
}, false); 

これは、途切れの少しを作成するかもしれないが、それはあなたがいないことを意味しますJavaScriptの実際の寸法を計算しなければならず、メディアクエリのような "ステップ"サイズを使う必要はありません。

Answer 4

これを行うには、VWのfont-sizeクエリと@mediaクエリを組み合わせるのが理想的です。理由は次のとおり

1）EM自身がウィンドウサイズ

2によって再スケーリングしないであろうため）自体のVMが800ピクセルよりも低い解像度/画面は小さすぎるであろう。

だから、これを達成するための正しい方法は次のとおりです。

• クラスを定義します - PROP-テキストVMと=お好みの画面幅1.0
• を希望したフォントサイズに合わせてメディアクエリを追加します。低解像度グリッド。私の応答グリッドの

（768px幅以下で100％の幅を取るために1/2列を設定している）、それは以下のようになります。

<style> 
    .prop-text{font-size:1.0vw} 
    @media (max-width : 768px) { 
    .prop-text{font-size:2.0vw} 
    } 
    /*other media queries here - fit font size to smartphone resolutions */ 
</style> 

<div class="prop-text">your text is here</div>