ビューポートに基づいて、css clamp（）を使用してフォントサイズを線形にスケーリングする

レスポンシブタイポグラフィは、メディアクエリやCSS Calc（）など、過去に多くの方法を試しました。

この記事では、さまざまな画面サイズで動作をより予測可能にすることを目的として、ビューポートの幅が増加するにつれて、最小サイズと最大サイズの間で直線的にテキストをスケーリングするという別のアプローチclamp() 。

CSS関数clamp()は強力です。それはあらゆる目的で機能しますが、タイポグラフィに特に役立ちます。次のように機能します。3つの値を受け入れます。

 <code>clamp(minimum, preferred, maximum);</code>

返品値は、優先値が最小値（最小値が返される）を下回るまで、最大値（最大値が返される）を下回るまで優先値になります。

だから、あなたが奇妙な値を設定して最小値と最大値の間にそれを設定しないと仮定すると、それは常に優先値ですか？さて、たとえば、優先値の式を使用する必要があります。

 <code>.banner { width: clamp(200px, 50% 20px, 800px); /* 是的，您可以在clamp() 中进行数学运算！*/ }</code>

ビューポート幅が360px以下で、ビューポート幅が840px以下の場合、最大フォントサイズが3.5 REMの場合、要素の最小フォントサイズを1 REMに設定する必要があるとします。

言い換えると：

 <code>1rem  = 360px 及以下缩放= 361px - 839px 3.5rem = 840px 及以上</code>

361〜839ピクセルのビューポート幅には、1レムと3.5レムの間で直線的にスケーリングされるフォントサイズが必要です。 clamp()を使用するのは実際には非常に簡単です！たとえば、600ピクセルのビューポート幅（360〜840ピクセル）では、1REMと3.5REMの間の中間値、つまり2.25REMを取得します。

clamp()で達成しようとする目標は、線形補間と呼ばれます。2つのデータポイント間の中間情報を取得します。

これを行うための4つのステップは次のとおりです。

ステップ1

最小および最大フォントサイズ、および最小および最大ビューポート幅を選択します。この例では、フォントサイズは1REMと3.5REMで、幅は360pxと840pxです。

ステップ2

幅をREMに変換します。ほとんどのブラウザの1REMはデフォルトでは16pxであるため（後で詳細）、使用します。したがって、最小および最大ビューポート幅は、それぞれ22.5 REMと52.5 REMになります。

ステップ3

ここでは、数学の側面に少し偏っています。結合すると、ビューポート幅とフォントサイズはxおよびy座標系に2つのポイントを形成し、これらのポイントは線を形成します。

この線が必要です。具体的には、その勾配とY軸との交差が必要です。これが計算方法です：

 <code>slope = (maxFontSize - minFontSize) / (maxWidth - minWidth) yAxisIntersection = -minWidth * slope minFontSize</code>

これにより、0.0833の勾配値と-0.875のY軸交差値になります。

ステップ4

次に、 clamp()関数を構築します。優先値の式は次のとおりです。

 <code>preferredValue = yAxisIntersection[rem] (slope * 100)[vw]</code>

したがって、関数は次のようになります。

 <code>.header { font-size: clamp(1rem, -0.875rem 8.333vw, 3.5rem); }</code>

次のデモで結果を視覚化できます。

続けて試してみてください。ご覧のとおり、ビューポート幅が840pxの場合、フォントサイズが拡大し、ビューポート幅が360pxの場合、フォントサイズが減少します。間のすべてが線形方法で変化します。

ユーザーがルートフォントサイズを変更した場合はどうなりますか？

このアプローチでは小さな欠陥に気づいたかもしれません。ルートフォントサイズがあなたの考え（前の例では16px）であり、決して変更されない場合にのみ機能します。

これがルートフォントサイズであると仮定するため、幅360pxと840pxをREMユニットに16で除算して変換します。ユーザーがデフォルトの16pxの代わりに18pxなどの別のルートフォントサイズを設定した場合、計算は間違っており、予想どおりにテキストがサイズを変更しません。

ここで使用する方法は1つしかありません。これは、（1）ページが読み込まれているときにコードに必要な計算を行う、（2）ルートフォントサイズの変更を聞き、（3）変更が発生した場合にすべてを再計算することです。

計算を実行するための便利なJavaScript関数は次のとおりです。

 //ピクセルでビューポート幅とREM関数ClampBuilderのフォントサイズを取得します（Minwidthpx、maxwidthpx、minfontsize、maxfontsize）{
  const root = document.queryselector（ "html"）;
  const pixelsperrem = number（getComputedStyle（root）.fontsize.slice（0、-2））;

  const minwidth = minwidthpx / pixelsperrem;
  const maxwidth = maxwidthpx / pixelsperrem;

  const slope =（maxfontsize -minfontsize） /（maxwidth -minwidth）;
  const yaxisintersection = -minwidth * slope minfontsize;

  return `clamp（$ {minfontsize} rem、$ {yaxisintersection} rem $ {slope * 100} vw、$ {maxfontsize} rem）`;
}

// clampbuilder（360、840、1、3.5） - > "Clamp（1Rem、-0.875Rem 8.333VW、3.5rem）"

返された文字列をCSSに挿入する方法を意図的に省略しました。これは、ニーズに応じてこれを行うには多くの方法があり、ネイティブCSS、CSS-in-JSライブラリなどを使用しているかどうかを省略しています。また、フォントサイズの変更に関するネイティブイベントはないため、手動で確認する必要があります。 setIntervalを使用して1秒に1回チェックできますが、これはパフォーマンスに影響を与える可能性があります。

これは極端な状況のようなものです。ブラウザのフォントサイズを変更する人はほとんどなく、ウェブサイトにアクセスするときに変更する人はほとんどいません。しかし、あなたがあなたのウェブサイトを可能な限り敏感にしたいなら、これはそれを行うための最良の方法です。

極度の状況を気にしない人のために

更新：ここで共有されているリソースは、この記事が最初に公開されてから動作を停止しました。さまざまなビューポートでフォントサイズを決定するのに役立つ計算機を探している場合は、最新の流体タイポグラフィを利用するFluid型ジェネレーターの使用を検討してください。

テキストの再調整を避ける方法

タイポグラフィのサイズに対するこのような細心の制御により、テキストが異なるビューポート幅で再調整するのを防ぐなど、他のクールなことを行うことができます。

これはテキストの通常の動作です。

しかし、今では、私たちのコントロールにより、テキストを同じ数の行に保持することができます。どのビューポート幅に関係なく、常に同じ単語にラインを包みます。

では、どうすればこれを行うことができますか？まず、フォントサイズとビューポート幅の比率は同じままでなければなりません。この例では、320pxの1REMから960pxの3REMに変更します。

 <code>320 / 1 = 320 960 / 3 = 320</code>

以前に書かれたclampBuilder()関数を使用すると、次のようになります。

 const text = document.queryselector（ "p"）;
text.style.fontsize = clampBuilder（320、960、1、3）;

同じ幅とフォント比を維持します。これを行う理由は、同じ数の行を維持できるように、テキストが各幅に正しいサイズを持っていることを確認する必要があるからです。それはまだ異なる幅で再調整されますが、これは私たちがしなければならない次の作業に必要です。

正しいフォントサイズを持つだけでは不十分であるため、CSS文字（CH）ユニットからヘルプを取得する必要があります。 CHユニットは、要素フォントのグリフ「0」の幅に相当します。 width: 100%を設定するのではなく、 width: Xchを使用することで、ビューポートと同じくらい広いテキスト本体をビューポートと同じ幅にしたいと考えています。

xを見つけるには、ビューポート幅が320pxの場合、最小ビューポート幅320pxをフォントサイズの要素のCHサイズで除算する必要があります。この場合、それは1 remです。

心配しないでください、ここに要素のCHサイズを計算するためのコードスニペットがあります：

 //目的のフォントサイズで要素の「0」グリフ（ピクセル単位）の幅を返します
関数calculatech（要素、fontsize）{
  const zero = document.createelement（ "span"）;
  zero.innertext = "0";
  zero.style.position = "absolute";
  zero.style.fontsize = fontsize;

  Element.AppendChild（Zero）;
  const chpixels = zero.getBoundingClientRect（）。width;
  Element.RemoveChild（Zero）;

  chpixelsを返します。
}

これで、テキストの幅を設定し続けることができます。

関数calculatech（要素、fontsize）{...}

const text = document.queryselector（ "p"）;
text.style.fontsize = clampBuilder（320、960、1、3）;
text.style.width = `$ {320 / calculatech（text、" 1rem "）} ch`;

うわー、待って。何か悪いことが起こりました。物事を台無しにする水平スクロールバーがあります！

約320pxについて話すとき、垂直スクロールバーを含むビューポートの幅について話しています。したがって、テキストの幅は、可視領域の幅とスクロールバーの幅に設定されているため、水平にオーバーフローします。

では、垂直スクロールバーの幅を含まないメジャーを使用してみませんか？ CSS VWユニットのおかげです。 clamp()でVWを使用してフォントサイズを制御していることを忘れないでください。 VWには、垂直スクロールバーの幅が含まれていることがわかります。これにより、Scrollbarを含むビューポート幅とともにフォントスケールが行われます。再調整を避けたい場合、幅は、スクロールバーを含むビューポート幅に比例する必要があります。

それで、私たちは何をすべきですか？私たちがするとき：

 text.style.width = `$ {320 / calculatech（text、" 1rem "）} ch`;

…結果を1未満に掛けることで結果を絞り込むことができます。0.9は問題を解決できます。これは、テキストの幅がビューポート幅の90％になることを意味します。これは、スクロールバーが取り上げる小さなスペースを補うのに十分です。少数の数値を使用して狭くすることができます（0.6など）。

関数calculatech（要素、fontsize）{...}

const text = document.queryselector（ "p"）;
text.style.fontsize = clampBuilder（20、960、1、3）;
text.style.width = `$ {320 / calculatech（text、" 1rem "） * 0.9} ch`;

320から数ピクセルを減算する傾向があるかもしれません。

 text.style.width = `$ {（320-30） / calculatech（text、" 1rem "）} ch`;

これを行うことの問題は、それが復帰問題を回復することです！これは、320から差し引くとViewportとFont比を破壊するためです。

テキストの幅は、常にビューポート幅の割合でなければなりません。もう1つ注意すべきことは、サイトを使用するすべてのデバイスに同じフォントをロードすることを確認する必要があるということです。これは明らかですね。さて、ここにあなたのテキストを逸脱するかもしれない小さな詳細があります。 font-family: sans-serifすべてのブラウザで同じフォントが使用されることを保証しません。 sans-serif 、Windows用のChromeにArialを設定しますが、Android用のChromeにロボットを設定します。さらに、一部のフォントのジオメトリは、すべてを正しく行う場合でも、再調整を引き起こす可能性があります。 Monowidthフォントは、最良の結果を生み出す傾向があります。したがって、フォントが正確であることを確認してください。

次のデモンストレーションで、この非回復例を参照してください。

コンテナ内の非実現テキスト

私たちが今しなければならないことは、テキスト要素に直接ではなく、コンテナにフォントのサイズと幅を適用することです。その中のテキストは、 width: 100%に設定する必要があります。段落とタイトルの場合、これはブロックレベルの要素自体であり、コンテナの幅を自動的に埋めるため、必要ありません。

この方法を親の容器に適用することの利点の1つは、フォントのサイズと幅を1つずつ設定することなく、子供が自動的に応答してサイズを変更することです。また、他の要素に影響を与えることなく単一の要素のフォントサイズを変更する必要がある場合、フォントサイズをEM値に変更するだけで、コンテナのフォントサイズに自然に関連します。

回復しないテキストはうるさいですが、それはデザインに良い結果をもたらす微妙な効果です！

要約します

要約すると、実際のシナリオでこれがどのように見えるかについての小さなデモをまとめました。

この最後の例では、ルートフォントサイズを変更することもでき、 clamp()関数は自動的に再計算され、テキストがいずれの場合でも正しいサイズになります。

この記事の目標は、フォントサイズでclamp()を使用することですが、この同じ手法を使用して、長さユニットのCSS属性を受信できます。今、私はあなたがそれをどこでも使うべきだと言っているのではありません。多くの場合、良いfont-size: 1remで十分です。必要なときにどれだけコントロールできるかを見せたいだけです。

個人的には、 clamp()はCSSで最高のものの1つであると信じており、他の使用がますます広く使用されるにつれて人々が思いつくのを楽しみにしています！

以上がビューポートに基づいて、css clamp（）を使用してフォントサイズを線形にスケーリングするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。