[解決済み] コンテナの幅に応じたフォントの拡大縮小

質問

フォントのスケーリングについて、なかなか理解できません。

現在、私のウェブサイトでは、ボディが font-size を100％にしています。でも、100％って何？これは、16ピクセルで計算されるようです。

100%というのは、なんとなくブラウザのウィンドウサイズを指しているのかと思いきや、どうやら違うようです。ウィンドウをモバイルの幅に縮小しても、本格的なワイドスクリーンのデスクトップに縮小しても、常に16ピクセルなのだそうです。

自分のサイトのテキストがコンテナに対して拡大縮小されるようにするにはどうしたらよいでしょうか？試しに em しかし、これも拡大縮小されません。

私の推論は、メニューのようなものはリサイズするとつぶれてしまうので、そのために px font-size の .menuItem を、コンテナの幅との関係で他の要素の中から選択することができます。(例えば、大きなデスクトップ上のメニューで 22px は完全に動作します。タブレットの幅に移動すると 16px がより適切です)。

ブレイクポイントを追加できることは承知していますが、どうしてもテキストを さて そうでなければ、テキストを制御するために、幅が100ピクセル小さくなるごとに数百のブレークポイントが必要になります。

解決方法は？

EDIT: コンテナがボディでない場合 CSS Tricksは、以下のオプションのすべてをカバーしています。 コンテナへのテキストのはめ込み .

コンテナがボディの場合、求めているのは ビューポートパーセンテージの長さ :

は ビューポートパーセンテージ のサイズに対する相対値です。 初期格納ブロック . 初期ブロックの高さや幅が変更された場合、それに応じて拡大縮小されます。ただし、ルート要素の overflow の値が auto の場合は、スクロールバーは存在しないものとする。

その値は

• vw (ビューポート幅の%)
• vh (ビューポートの高さの%)
• vi (ルート要素のインライン軸方向でビューポートサイズの1%)
• vb (ルート要素のブロック軸方向にビューポートサイズの1％）。
• vmin (の小さい方）。 vw または vh )
• vmax (大きい方または vw または vh )

1 v*は、初期含有ブロックの1%に相当します。

使用するとこのようになります。

p {
    font-size: 4vw;
}

ご覧のように、ビューポートの幅が大きくなると、その分だけ font-size メディアクエリを使用する必要はありません。

これらの値はサイジングの単位であり、ちょうど px または em そのため、幅、マージン、パディングなど、他の要素のサイズにも使用することができます。

ブラウザのサポートはかなり良いですが、おそらく次のようなフォールバックが必要でしょう。

p {
    font-size: 16px;
    font-size: 4vw;
}

サポート統計情報を確認する http://caniuse.com/#feat=viewport-units .

また、CSS-Tricksでより広い範囲を確認することができます。 ビューポートサイズタイポグラフィ

最小/最大サイズを設定し、サイズをもう少しコントロールすることについては、こちらの記事が参考になります。 レスポンシブ・タイポグラフィの正確な制御

そして、テキストがビューポートいっぱいに表示されるように、calc()を使ってサイズを設定する記事はこちらです。 http://codepen.io/CrocoDillon/pen/fBJxu

また、「molten leading」と呼ばれるテクニックを使って行の高さを調整したこちらの記事もご覧ください。 CSSにおけるモルテンリーディング