私のアプリケーションには、ライブモードとプレビューモードの2つのビューがあります。これらの両方にサイズ変更可能なウィンドウがあります。それらは同じhtmlファイルです。私は、両方のビューのサイズが変更されたときに、そのサイズに比例してフォントサイズを変更する方法を探しています。 javascriptフレームワークとしてjQueryを使用しています。 これをCSSまたはjQueryのどちらでも動作させる方法はありますか?CSS/Javascript流体フォントサイズ
3
A
答えて
6
:
あなたはウィンドウではない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」またはパーセントのフォントサイズを与えることによって、そのフォントサイズの再かなりを持っている任意の要素を設定しています。
3
確かに、幅と高さのパラメータをとる関数を持つ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);
}
});
関連する問題
- 1. CSS:流体サイドバー - 流体の内容
- 2. フォントサイズの媒体で
- 3. CSS流体レイアウト
- 4. ブートストラップナビゲーションコンテナ流体センターライブラリ
- 5. iPhone流体シミュレーション
- 6. 流体シミュレーション "ブローアップ"
- 7. 3カラム流体CSS
- 8. アンドロイドの流体レイアウト
- 9. デルファイの流体フォームレイアウト
- 10. 流体比較日
- 11. 流体の流れ、熱伝達とPython
- 12. 流体コンテナ内に流体イメージを垂直にセンタリングします
- 13. のCss流体レイアウトは
- 14. Firemonkey/Delphiの流体/ダイナミックレイアウト
- 15. 画像は、流体計測
- 16. 3列流体スクロールセンターCSSレイアウト
- 17. 流体CSSレイアウトの質問
- 18. 流体幅ウェブサイトのデザイン
- 19. CSS - 流体レイアウト上のテーブルレスメニューバー
- 20. CSS流体レイアウトと画像
- 21. CSS流体イメージの交換?
- 22. 3列の流体レイアウト
- 23. 流体格子レイアウトjQuery
- 24. 流体リサイズ動作のGUI
- 25. css3トランジション:フローティングアイテムの流体レイアウトアニメーション
- 26. 流体レイアウト保存レイアウト
- 27. 流体イメージ、幅の流体内で垂直に整列(中央)DIV
- 28. 高さマップ上の流体の流れをシミュレートする
- 29. ブートストラップ流体レイアウト - 固定幅のサイドバー
- 30. CSSの流体レイアウトイメージの問題
は、上のコードで '' px "'のスペースを取り除いて動作させる必要がありました – MLister