フォントのスケーリングの問題を理解するのが難しいです。
現在、本文の font-size が 100% の Web サイトを持っています。 100%だけど何？これは16ピクセルで計算されているようです。
100% というのはどういうわけかブラウザ ウィンドウのサイズを指しているのではないかと思っていましたが、どうやらそうではないようです。ウィンドウのサイズがモバイルの幅に変更されるか、フルワイドスクリーンのデスクトップに変更されるかに関係なく、常に 16 ピクセルだからです。
ウェブサイトのコンテナに相対したスケールでテキストを作成するにはどうすればよいですか? em を使用してみましたが、これもスケールしません。
私の推論は、メニューなどはサイズを変更すると押しつぶされてしまうため、 .menuItem -size の px font を小さくする必要があるということです。コンテナの幅に関連するその他の要素。 (たとえば、大きなデスクトップ上のメニューでは、22px が適切に機能します。タブレットの幅を下げると、16px がより適切です。)
ブレークポイントを追加できることはわかっていますが、テキストを 適切に拡大縮小したいのです まるで追加のブレークポイントがあるかのように、そうしないと、100 ピクセル縮小するごとに、数百のブレークポイント コントロールが必要になってしまいます。テキストの幅。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
この質問は、2507rkt3 の Alex によって回答されました。
この事実は、
vwを使用してこのコンテナのサイズを決定できないという意味ではありません。ここで、変更を確認するには、コンテナが何らかの形で寸法的に柔軟であると仮定する必要があります。直接パーセンテージwidthを使用するか、100%からマージンを差し引いた値を使用します。コンテナーが常に幅 200 ピクセルに設定されている場合、これは「無意味」になります。その場合は、その幅に合わせてfont-sizeを設定するだけです。 p>例 1
ただし、幅が柔軟なコンテナの場合、コンテナ のサイズはビューポートに基づいてある程度 変更されることを認識することが重要です。したがって、
リーリーvw設定は、ビューポートとのサイズ差のパーセンテージに基づいて調整する必要があります。これは、親ラッパーのサイズを考慮することを意味します。 この例を見てください:ここでは、
divがbodyの子であり、この基本的なケースでは50%幅の100%であると仮定します。以下はビューポートのサイズです。基本的に、自分にとって適切と思われるvwを設定する必要があります。 CSS コンテンツの上記のコメントにあるように、ビューポート全体のサイズを数学的に「考える」ことができますが、その必要はありません。ビューポートのサイズが変更されるとコンテナが曲がるため、テキストはコンテナとともに「曲がります」。 ここでは、2 つの異なるサイズのコンテナの例を示します。例 2
これに基づいて計算を強制することで、ビューポート サイズを確保することができます。この例を考えてみましょう: リーリー
寸法は依然としてビューポートに基づいていますが、基本的にコンテナの寸法自体に基づいて設定されます。
コンテナのサイズは動的に変更する必要があります...
コンテナ要素のサイズが @media ブレークポイントまたは JavaScript を介してパーセンテージの関係を動的に変更することになった場合、基礎となる「目標」が何であれ、テキストのサイズ変更に使用したのと同じ「関係」を維持するために再計算する必要があります。
上記の例 #1 を考えてみましょう。@media
CSS の使用または JavaScript を使用してdiv幅を25%幅に切り替える場合は、font-sizeも含める必要があります。メディア クエリ、または新しい計算5vw * .25 = 1.25に適合するように JavaScript 経由で調整されます。これにより、テキストのサイズは、元の50%コンテナの「幅」がビューポート サイズから半分に縮小されたときと同じサイズになりますが、変更により独自のパーセンテージ計算によって縮小されます。＃＃＃＃＃＃チャレンジ＃＃＃＃＃＃calc() 関数 現在この関数は
font-sizeの目的で使用できないため、使用中に動的な調整が困難になります。したがって、calc()
の幅が変更された場合、純粋な CSS 調整は不可能になります。もちろん、マージン幅を少し調整しただけでは、font-size の変更を保証するのに十分ではないため、問題にならない可能性があります。コンテナ クエリは、ユースケースに応じて現時点ではおそらく最良のオプションであり、すべての主要なブラウザでサポートされています。サポート レベルはこちらでご確認ください: https://caniuse.com/mdn-css_properties_container
制御が簡単になりました