CSS/Javascript流体フォントサイズ

Question

私のアプリケーションには、ライブモードとプレビューモードの2つのビューがあります。これらの両方にサイズ変更可能なウィンドウがあります。それらは同じhtmlファイルです。私は、両方のビューのサイズが変更されたときに、そのサイズに比例してフォントサイズを変更する方法を探しています。 javascriptフレームワークとしてjQueryを使用しています。 これをCSSまたはjQueryのどちらでも動作させる方法はありますか？

Answer 1

：

あなたはウィンドウではないhtml要素のサイズ変更イベントを取得するには、このプラグインを使用する必要があります。 1つとして十分である。だからこれが私のやり方です。

まず、指定された幅に基づいて適切なフォントサイズを計算するこの関数を設定します。

function getFontSize(width){ 
    sizew = width/100; 
    size = sizew * 1.5; 
    return size; 
}; 

次に、ロード時に実行する関数を取得し、ウィンドウのサイズを変更して、それに応じてボディのフォントサイズを変更します。

$(window).resize(function(){ 
    size = getFontSize($(this).width()); 
    $("body").css("font-size", size + "px"); 
}).resize(); 

あなたはそこからしなければならないすべてはそれを「EM」またはパーセントのフォントサイズを与えることによって、そのフォントサイズの再かなりを持っている任意の要素を設定しています。

Answer 2

確かに、幅と高さのパラメータをとる関数を持つjavascriptオブジェクトを定義します。その幅と高さに基づいて、あなたの望むフォントサイズを返します。次に、resizeイベントハンドラをウィンドウにアタッチします。これは、定義した関数を呼び出し、ウィンドウのドキュメント本体にfont-size cssプロパティを設定します。私は自分の質問に答えるのです知っているが、上記の答えは参考になりましたが十分ではなかったhttp://benalman.com/projects/jquery-resize-plugin/

var fontsize = function FontSizeBasedOnDimensions{ 
     var that = {}; 
     that.GetFontSize = function(height, width){ 
      //Make some decisions here 
     }  
     return that; 
}(); 

$('#yourwindow').resize(function(){ 
    var size = fontsize.GetFontSize($(this).css('height'), $(this).css('width')); 
    var currentsize = parseInt($(this).css('font-size'),10); 
    if(size != currentsize){ 
      $(this).css('font-size', size); 
    } 
});