ウィンドウのフォントサイズを変更する

こんにちは皆さんは ".text"クラスを持ち、メインのコンテナサイズの変更（サイズ変更時）に合わせてフォントサイズを変更する小さなスクリプトを作成しています。これは私が思いついたものです。しかし残念なことに、これはすでに変更されたテキストを取り込み、サイズを変更すると無限に変更されます。ウィンドウのフォントサイズを変更する

一般的に私は、このスクリプトはすべての異なるフォントサイズをとる必要があり、ウィンドウのサイズ変更は、それらを私がcssで定義した元のサイズからのみ変更する必要があります。

アドバイスは本当に感謝しています。

$(".text").each(function() { 
    // getting how many times original size of container changed 
    var starter_height = $('#wrapper').height(); 
    var height_change = starter_height/602; 

    totalHeight = parseInt($(this).css('font-size')); 
    $(this).css({"font-size": totalHeight * height_change + "px"}); 
    console.log(totalHeight); 
});

出典

2016-03-20 Deividas

を使用することができますか？フォントサイズを画面サイズに合わせて調整するには、font-sizeを％で指定します。たとえば：font-size：100％は通常のラップトップ画面では14pxです。あなたは110％、90％、または何でもしたいことができます。また、CSSメディアクエリを参照したいかもしれません。 –

'em'などのようなものを使用して、メディアクエリで' body'フォントサイズを変更してみませんか？ – Roope

あるいは、 'rem'（それは' em'値ですが、*常にドキュメントルートのフォントに基づいています）を使い、@ Roopeの提案を使用してください –

Thx人。フォントサイズでemを使用して私のアイデアと自分のアイデアを組み合わせることができました。今では、少なくともフォントのために多くの異なるメディアクエリを書く必要はありません。また、サイズ変更時にフォントを更新するのではなく、余白を追加するために余分な "if"を追加することも考えています。

出典

2016-03-21 09:42:26 Deividas

あなたfont-sizeは、画面サイズに比例していなければならない場合は、これを行うにはしたくない、なぜ、あなたはvw and vh

.text-1 { 
 
    font-size: 6vh; 
 
}

<div class="text-1">First Text</div>

出典

2016-03-21 12:15:49 xpy

ウィンドウのフォントサイズを変更する

答えて

関連する問題