ブラウザのウィンドウでCSSのフォントサイズを変更する

Question

これはCSSまたはJavaScriptで可能ですか？だから、特定のブラウザのサイズで20ptフォントや1emフォントなどが必要だが、ブラウザのウィンドウが縮小または拡大すると、フォントが縮小されて展開されますか？ありがとう

Answer 1

これを行うには、onResizeイベントを使用できます。例えば、http://api.jquery.com/resize/のようにjQueryを使ってこれを行うことができます。特定の要素に対して適切なCSS変更を適用するだけで済みます。

Answer 2

私が知っている適切なCSSソリューションはありません。あなたは％でフォントサイズを定義することができますが、それは親要素フォントのピクセルの％を取るでしょう。

あなたはメディアクエリを使用できますが、流暢ではない段階で大きくなります。

.p { 
    font-size: 20px; 
}  
@media screen and (max-width: 600px) { 
    .p { 
    font-size: 12px; 
    } 
} 
@media screen and (max-width: 800px) { 
    .p { 
    font-size: 14px; 
    } 
} 
@media screen and (max-width: 1000px) { 
    .p { 
    font-size: 16px; 
    } 
} 
@media screen and (max-width: 1200px) { 
    .p { 
    font-size: 18px; 
    } 
} 

Answer 3

ここでは、動作するCSS3またはJavascriptの（広範にサポートされていない部分）に依存しないソリューションです。これは、フォントサイズを変更するには、メディアクエリを使用しますが、SASSを採用したおかげで、それが簡潔に表現され、それは非常に使いやすい：4つのパラメータが付属

http://github.com/wadim/responsive-font-size

をこのミックスインはインテリジェントに右メディアクエリを把握しますあなたの定義。