21

私は学校のプロジェクトに取り組んでいます: http://lauralynn87.github.io/WSP/Project/index.html

フレームワークBootstrap 3.0を使用しています-ほとんどすべてがレスポンシブですが、テキスト.

フォント サイズにパーセンテージと ems を使用しようとしましたが、何も機能しません。私は何かが欠けていることを知っていますが、それを理解することはできません.

どんな助けでも大歓迎です。

ありがとう。

4

5 に答える 5

28

%などを使用すると、フォントが反応しなくなりますem。

さまざまな画面/ウィンドウ サイズでフォントのサイズを変更する場合は、CSS でメディア クエリを使用する必要があります。

例えば：

@media all and (max-width: 1200px) { /* screen size until 1200px */
    body {
        font-size: 1.5em; /* 1.5x default size */
    }
}
@media all and (max-width: 1000px) { /* screen size until 1000px */
    body {
        font-size: 1.2em; /* 1.2x default size */
        }
    }
@media all and (max-width: 500px) { /* screen size until 500px */
    body {
        font-size: 0.8em; /* 0.8x default size */
        }
    }

もちろん数字は一例です。

于 2013-09-28T19:00:49.560 に答える
26

これは、Bootstrap デバイス サイズを使用した画面のみのモバイル ファースト CSS スニペットです。コメント:

  • Bootstrap は、表示サイズの変更に応じてタイポグラフィをスケーリングしません。
  • 27 インチ モニターでスマートフォンと同じフォント サイズが本当に必要ですか? 画面ごとに異なるフォント サイズが適している優れたデザインをいくつか見てきました。テストにより、デザインが正しいか間違っているかが証明されます。
  • 画面と印刷のフォント サイズを同じにしますか? スクリーンと印刷物は別物です。印刷に関心がある場合は、個別にテストする必要があります。
  • 以下で使用するフォントのスケーリングは任意です。魔法はありません。

.

/* xs < 768 */
@media screen and (max-width: 767px) {
    body {
        font-size: 0.9em;
    }
}

/* sm */
@media screen and (min-width: 768px) {
    body {
        font-size: 1em;
    }
}

/* md */
@media screen and (min-width: 992px) {
    body {
        font-size: 1.2em;
    }
}

/* lg */
@media screen and (min-width: 1200px) {
    body {
        font-size: 1.3em;
    }
}

効果を示す jsfiddle: https://jsfiddle.net/stevetarver/9a8ym3hL/embedded/result/。メディア クエリは、上記のように本文ではなく、th、td フォント サイズのみを変更することに注意してください。

于 2015-10-24T07:50:24.943 に答える
6

Fittext jQuery pluginデフォルトですべてのテキストをレスポンシブにすることをお勧めします。2 つの js ファイルと 1 行の jQuery コードのみが必要です。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
          $("body").fitText();
  });
</script>

Fittextを参照

于 2013-09-28T20:30:58.770 に答える
0

独自のメディア クエリを追加して、画面サイズに応じてフォント サイズを変更します。ここを参照

于 2013-09-28T18:51:10.177 に答える