6

私のhtmlには、テキストサイズが異なるさまざまな要素があります。画面サイズごとに異なるフォントサイズが表示されるように、それらを動的に設定したいと思います。

最善の方法は何ですか？今、私はこのようにしていますが、コードが見苦しくなります:

<script>
$(window).resize(function(){
$('#first').css('font-size',($(window).width()*0.2)+'px');
$('h2').css('font-size',($(window).width()*0.02)+'px');
$('h1').css('font-size',($(window).width()*0.03)+'px');

2 つの要素の場合は問題ありませんが、もっと多くの要素があります。html/css/javascript の経験があまりないので、これが私が思いついたものです。

私は学んでいるので、何が最善の方法かを知りたいです。

多分あなたはそれを改善する方法をいくつか提案していますか？

4

9 に答える 9

0

css メディア クエリでこれを行うことができます。

メディア クエリ セット内のボディ サイズ (パーセンテージ)。

例: css

@media screen and (max-width: 1024px) {
   body {
      font-size: 90%;
   }
}

@media screen and (max-width: 1440px) {
   body {
      font-size: 100%;
   }
}

次に、ブラウザーのサイズを変更するか、解像度に応じてパーセンテージでフォントのサイズを変更するときに、フォントのサイズを変更するすべての要素にフォントサイズを設定します。

例: h1 のフォントのサイズを変更したい場合

h1 {
   font-size: 150%;
}

それはあなたが望むように機能します。

于 2013-10-07T11:50:36.760 に答える