html - モバイル用の CSS フォント サイズ

Question

さまざまなサイズの画面にうまく反応するように見える単純なページが完成しました。これを達成するために特別なことは何もしていません-固定サイズなどを避けただけです.

ただし、1 つのページには、大きなフォントで大きな単語が 1 つ含まれています。

ブラウザーのサイズを変更すると、他のすべてのコンテンツが正しくレイアウトされますが、タイトルの単語はもちろん壊れません:

これを処理する正しい方法は何ですか? 画面の幅に基づいてフォント サイズを調整する方法はありますか?

Answer 1

もう 1 つのオプションは、viewport-percentage lengthsを使用することです。

vw 単位:最初の包含ブロックの幅の 1% に等しい。

特定のブラウザーの再描画バグについて説明しているCSS Tricksで詳細を読むことができますが、小さな jQuery で修正できます。

http://jsfiddle.net/7L9QH/

CSS

h1 {
    font-size: 25vw;
}