コンテナのサイズに基づいたフォントのスケーリング

Question

フォントのスケーリングの問題を理解するのが難しいです。

現在、本文の font-size が 100% の Web サイトを持っています。 100%だけど何？これは16ピクセルで計算されているようです。

100% というのはどういうわけかブラウザ ウィンドウのサイズを指しているのではないかと思っていましたが、どうやらそうではないようです。ウィンドウのサイズがモバイルの幅に変更されるか、フルワイドスクリーンのデスクトップに変更されるかに関係なく、常に 16 ピクセルだからです。

ウェブサイトのコンテナに相対したスケールでテキストを作成するにはどうすればよいですか? em を使用してみましたが、これもスケールしません。

私の推論は、メニューなどはサイズを変更すると押しつぶされてしまうため、 .menuItem -size の px font を小さくする必要があるということです。コンテナの幅に関連するその他の要素。 (たとえば、大きなデスクトップ上のメニューでは、22px が適切に機能します。タブレットの幅を下げると、16px がより適切です。)

ブレークポイントを追加できることはわかっていますが、テキストを 適切に拡大縮小したいのです まるで追加のブレークポイントがあるかのように、そうしないと、100 ピクセル縮小するごとに、数百のブレークポイント コントロールが必要になってしまいます。テキストの幅。

Answer 1

この質問は、2507rkt3 の Alex によって回答されました。

この事実は、vw を使用してこのコンテナのサイズを決定できないという意味ではありません。ここで、変更を確認するには、コンテナが何らかの形で寸法的に柔軟であると仮定する必要があります。直接パーセンテージwidthを使用するか、100%からマージンを差し引いた値を使用します。コンテナーが常に幅 200 ピクセルに設定されている場合、これは「無意味」になります。その場合は、その幅に合わせて font-size を設定するだけです。 p>

例 1

ただし、幅が柔軟なコンテナの場合、コンテナ のサイズはビューポートに基づいてある程度 変更されることを認識することが重要です。したがって、vw 設定は、ビューポートとのサイズ差のパーセンテージに基づいて調整する必要があります。これは、親ラッパーのサイズを考慮することを意味します。 この例を見てください:

リーリー

ここでは、div が body の子であり、この基本的なケースでは 50% 幅の 100% であると仮定します。以下はビューポートのサイズです。基本的に、自分にとって適切と思われる vw を設定する必要があります。 CSS コンテンツの上記のコメントにあるように、ビューポート全体のサイズを数学的に「考える」ことができますが、その必要はありません。ビューポートのサイズが変更されるとコンテナが曲がるため、テキストはコンテナとともに「曲がります」。 ここでは、2 つの異なるサイズのコンテナの例を示します。

例 2

これに基づいて計算を強制することで、ビューポート サイズを確保することができます。

この例を考えてみましょう: リーリー

寸法は依然としてビューポートに基づいていますが、基本的にコンテナの寸法自体に基づいて設定されます。

コンテナのサイズは動的に変更する必要があります...

コンテナ要素のサイズが @media ブレークポイントまたは JavaScript を介してパーセンテージの関係を動的に変更することになった場合、基礎となる「目標」が何であれ、テキストのサイズ変更に使用したのと同じ「関係」を維持するために再計算する必要があります。

上記の例 #1 を考えてみましょう。

@media または JavaScript を使用して div 幅を 25% 幅に切り替える場合は、font-size も含める必要があります。メディア クエリ、または新しい計算 5vw * .25 = 1.25 に適合するように JavaScript 経由で調整されます。これにより、テキストのサイズは、元の 50% コンテナの「幅」がビューポート サイズから半分に縮小されたときと同じサイズになりますが、変更により独自のパーセンテージ計算によって縮小されます。 ＃＃＃＃＃＃チャレンジ＃＃＃＃＃＃

CSS の使用

calc() 関数 現在この関数は

font-size

の目的で使用できないため、使用中に動的な調整が困難になります。したがって、calc() の幅が変更された場合、純粋な CSS 調整は不可能になります。もちろん、マージン幅を少し調整しただけでは、font-size の変更を保証するのに十分ではないため、問題にならない可能性があります。

Answer 2

コンテナ クエリは、ユースケースに応じて現時点ではおそらく最良のオプションであり、すべての主要なブラウザでサポートされています。サポート レベルはこちらでご確認ください: https://caniuse.com/mdn-css_properties_container

制御が簡単になりました

リーリー