Clever Geek Handbook

レスポンシブフォントサイズ

サイトが柔軟性と適応性を備えている理由を説明する必要はありません。 誰もが関心のあるメディアクエリをレイアウトで使用しています。 これが標準です。







しかし、タイポグラフィは最近まで、それほど柔軟ではありませんでした。 できることは、フォントサイズをブレークポイントからブレークポイントに変更することだけでした。 この場合、レスポンシブタイポグラフィではなく、適応型タイポグラフィを受け取りました。 メディア要求ごとに、独自の値を設定する必要があります。 もちろん、相対的なフォントサイズでコンポーネントアプローチを使用できます。これにより、編集プロセスが大幅に高速化されますが、基本的には何も変わりません。 コンポーネントを別の場所に移動するときは、すべてのメディアクエリを再度実行し、新しい値に置き換える必要があります。







しかし、それらは登場しました-vw 、 vh 、 vmin 、 vmax-ビューポートに基づく測定単位。 レスポンシブなタイポグラフィのチャンスがあります。









ビューポート依存ユニットの概要



100vwは、ピクセル単位の画面の幅（ 100vh-高さ）に等しい（またはcalc（）で使用される場合、他の値に変換されます）。 100vmax-高さと幅のペアの大きい方に等しく、 100vmin-小さい方に。 すぐに、タイポグラフィでこれらの奇跡の量を使用するためのレシピが現れ始めました。







しかし、この形式では、制御が困難です。 時々 、ある種の魔法の割合を使ってレシピを見つけました。 しかし、私はそれらがどこから来たのかを選別し、自分の条件で必要なサイズを得るためにそれらを手動でカウントまたはピックアップするオプションに満足していませんでした。







挑戦する



フォントサイズの最小値と最大値を設定したり、これらの数値を特定のビューポートサイズにバインドしたりできるユニバーサルレシピが必要でした。 たとえば、画面幅が480pxの場合、正確に16pxで、 1280px - 24pxがあります。







ソリューションへの道



学校の数学のコースを思い出して、私の仕事は2点を通る直線の方程式に他ならないという結論に達しました。 最初のドットは画面の幅とそのフォントサイズが小さく、2番目のドットは幅が大きく、対応するフォントサイズです。













X軸はブラウザウィンドウの幅、 Y軸はフォントサイズです。 2つの未知数を含む方程式が得られます。











{x-x_1 \ x_2-x_1以上} = {y-y_1 \ y_2-y_1以上}










どこから











y = {x-x_1 \ x_2-x_1以上（y_2-y_1）+ y_1










yは未知のフォントサイズ、 xは現在の画面サイズです。 x 1は最小フォント値、 x 2は最大フォント値です。 y 1とy 2は 、それぞれ画面幅の最小値と最大値です。







そして今、最も興味深いのは、CSS calc（）関数と現在のビューポート値を持つことです。vwのおかげで、動的なフォントサイズを取得できます。 







font-size: calc( (100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);


この式は、すでに純粋なCSSで使用できます。 乗算/除算の操作中、引数の少なくとも1つは単位なしでなければならず、加算/減算時には両方とも単位付きでなければならないことに注意してください。 値を代入して、作業バージョンを取得します（ユニットの使用に注意してください）： 







 font-size: calc( (100vw - 480px)/(1280 - 480) * (24 - 16) + 16px);


測定単位は任意に使用できますが、主なものはそれらが一致することです。 同じこと、 remのみ： 







 font-size: calc( (100vw - 30rem)/(80 - 30) * (1.5 - 1) + 1rem);


Sass / SCSSを使用する



Sassのようなツールを手にすると、ほとんどの計算をブラウザーから隠すことができます。

このため、次の直線の方程式がより適しています。











y = kx + b










係数kおよびbは、2点の直線の方程式から取得できます。











k = {y_2-y_1 \ over x_2-x_1}














b = y_1- {y_2-y_1 \ x_2-x_1以上} x_1 = y_1-kx_1










関数を取得します： 







 @function calcFluidFontSize($f-min, $f-max, $v-min, $v-max) { $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b * 1px; @return calc( #{$k} * 100vw + #{$b} ); } .fluid-font-size { font-size: calcFluidFontSize(16, 48, 480, 1280); }


pxだけでなく他の測定単位も使用できるようにしたい場合は、次のいずれかのパラメーターを使用して転送できます。 







 @function calcFluidFontSize($f-min, $f-max, $v-min, $v-max, $units: px) { $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b + $units; @return calc( #{$k} * 100vw + #{$b} ); } .fluid-font-size { font-size: calcFluidFontSize(1, 3, 30, 80, rem); }


誤って入力されたデータから保護するために、データを受信するときにユニットをトリミングできます。 これを行うには、 strip-unit関数を使用するか、 bourbonライブラリから取得します。 







 @function strip-unit($number) { @if type-of($number) == 'number' and not unitless($number) { @return $number / ($number * 0 + 1); } @return $number; } @function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) { $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc( #{$k} * 100vw + #{$b} ); }


機能を拡張する



フォントサイズを計算する機能があります。 これに基づいて、必要に応じて拡張できるミックスインを作成できます。







たとえば、古いブラウザーのフォールバックが必要です。 







 @mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) { @if ($fallback) { font-size: $fallback; } font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); } .fluid-font-size { @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); }


vwがサポートされていない場合のフォールバックとして、最適なフォントサイズを転送できるようになりました。







フォントサイズを最小値および/または最大値に制限できます。 







 @mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) { font-size: $f-min; @media (min-width: $w-min) { @if ($fallback) { font-size: $fallback; } font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); } @media (min-width: $w-max) { font-size: $f-max; } } .fluid-font-size { @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); }


画面幅が480px未満の場合、フォントは常に16pxになり、 480以降はゴムになり、 1280px以降は常に24pxになります。







結果



すべての基本機能を実行する基本機能を取得しました。 







 @function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) { $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc( #{$k} * 100vw + #{$b} ); }


それを拡張するために、ミックスインが使用され、フォールバック、制限、単位変換などを行うことができます。 codepenでこれらすべてを試すことができます。 Sassを使用したくない場合は、 ここで純粋なCSSで計算する方法を見つけます。







読む



» CSSの長さ

» REM対EM-大論争

» ビューポートサイズのタイポグラフィ

» vhおよびvw単位を使用した真の流体タイポグラフィ

» ビューポートユニットベースのタイポグラフィ







More articles:


All Articles