CSSカスタムプロパティ( CSS変数)を使用した流体タイポグラフィ

導入
あなたが画面サイズに流体的に敏感にフォントサイズを変えたいならば、あなたはvw . 例えば、設定した場合font-size: 5vw; , フォントサイズは48px ビューポートの幅960px , and 16px for 320px . しかし、あなたが感じるならば16px が大きすぎる320px そして、それを作りたい32px , いくつかの計算を行う必要があります.
流体タイポグラフィと計算の詳細については、日本語を読むことができるならば、古いプレゼンテーションからのスライドを参照してください.

Typography Basic

または、次の英文記事を読むことができます.

Fluid Typography

Simplified Fluid Typography

Modern Fluid Typography Using CSS Clamp

私も計算してCSSを生成するWebアプリケーションを作った

ViewportScaler

そして、SMIS mixin:

ixkaito / viewportscale
フォントサイズ、マージン、パディングなどをビューポート幅で線形にする.
この記事では、流体タイポグラフィをcalc() , clamp() , min() , max() とCSSのカスタムプロパティは、ので、自分で毎回計算する必要はありません.

ソースコードとデモ

使い方
まず、次のコードをCSSにコピーペーストします.コメント部分はオプションですが、使用方法を理解できます.次に、ドキュメントを参照して、必要なCSSカスタムプロパティを任意の要素に設定する必要があります.

/**
* Available vars:
* @var --viewport-from: <number> - Number in pixels without the unit. Required if `--font-size` is not exist.
* @var --viewport-to: <number> - Number in pixels without the unit. Required if `--font-size` is not exist.
* @var --font-size-from: <number> - Number in pixels without the unit. Required if `--font-size` and `--min-font-size` is not exist.
* @var --font-size-to: <number> - Number in pixels without the unit. Required if `--font-size` and `--max-font-size` is not exist.
* @var --max-font-size: <number> - Number in pixels without the unit. Optional.
* @var --min-font-size: <number> - Number in pixels without the unit. Optional.
* @var --viewport-unit-converter: 1vw | 1vh | 1vmin | 1vmax - Optional. Default: 1vw.
* @var --font-size: <length> | <percentage> | <absolute-size> | <relative-size> | Global values - Optional.
*/
*, ::before, ::after {
  --viewport-unit-converter: 1vw;
  --fz-from: var(--font-size-from, var(--min-font-size));
  --fz-to: var(--font-size-to, var(--max-font-size));
  --fz-slope: (var(--fz-to) - var(--fz-from)) / (var(--viewport-to) - var(--viewport-from)) * 100;
  --fz-intercept: (var(--viewport-to) * var(--fz-from) - var(--viewport-from) * var(--fz-to)) / (var(--viewport-to) - var(--viewport-from));
  --font-size: calc(var(--fz-slope) * var(--viewport-unit-converter) + var(--fz-intercept) * 1px);

  --min-fz-px: calc(var(--min-font-size) * 1px);
  --max-fz-px: calc(var(--max-font-size) * 1px);
  --clamp: clamp(var(--min-fz-px), var(--font-size), var(--max-fz-px));
  --max: var(--has-max, var(--min));
  --min: var(--has-min, var(--font-size));
  --has-max: min(var(--max-fz-px), var(--font-size));
  --has-min: max(var(--min-fz-px), var(--font-size));

  font-size: var(--clamp, var(--max));
}

例1 :

h1 {
  --viewport-from: 320;
  --font-size-from: 32;
  --viewport-to: 960;
  --font-size-to: 48;
}

この場合、フォントサイズは32px ビューポートの幅320px and 48px for 960px 最小値と最大値のない.フォントサイズは小さくなったり大きくなったりします320px または960px .

例2 :

h1 {
  --viewport-from: 320;
  --viewport-to: 960;
  --min-font-size: 32;
  --max-font-size: 48;
}

これは実施例1と同じ変化率を持っていますが、フォントサイズは1よりも小さくなりません32px または48px .

h1 {
  --viewport-from: 320;
  --font-size-from: 32;
  --viewport-to: 960;
  --font-size-to: 48;
  --min-font-size: 32;
  --max-font-size: 48;
}

このコードはあなたに同じ結果を与えます.あなたは省略できます--font-size-from and --font-size-to if --font-size-from and --min-font-size , and --font-size-to and --max-font-size は同じ値を持つ.

例3 :

h1 {
  --viewport-from: 320;
  --viewport-to: 960;
  --min-font-size: 32;
  --font-size-to: 48;
}

また、最小値または最大値のみを指定できます.

例4 :

h1 {
  --viewport-from: 320;
  --font-size-from: 32;
  --viewport-to: 960;
  --font-size-to: 48;
  --min-font-size: 36;
  --max-font-size: 40;
}

--font-size-from and --min-font-size , and --font-size-to and --max-font-size は異なる値を持つことができます.この場合、フォントサイズは32px for 320px to 48px for 960px ; 実際には、36px より大きい40px .

例5 :

h1 {
  --viewport-from: 320;
  --font-size-from: 32;
  --viewport-to: 960;
  --font-size-to: 48;
}

@media (min-width: 960px) {
  h1 {
    --viewport-from: 960;
    --font-size-from: 48;
    --viewport-to: 1920;
    --font-size-to: 64;
  }
}

メディアクエリを使用する場合は、中央の変更率を変更することができます.上記のコードがメディア問い合わせ部分を持っていないなら、フォントサイズはそうです72px アット1920px .

例6 :

h1 {
  --viewport-from: 320;
  --font-size-from: 48;
  --viewport-to: 960;
  --font-size-to: 32;
  --min-font-size: 16;
}

また、大型から小型に変更可能である.

例7 :

h1 {
  --font-size: 2rem;
}

また、一定の値を設定することができます.If --font-size が指定された場合、他のすべてのプロパティは省略可能です.

例8 :

h1 {
  --font-size: calc(2.5vw + 24px);
}

また、あなた自身の式を指定することができます.

例9 :

h1 {
  --font-size: calc(2.5vw + 24px);
  --min-font-size: 32;
  --max-font-size: 48;
}

また、最大値と最小値を使用して独自の式を使用することができます.

例10 -

h1 {
  --viewport-unit-converter: 1vh;
  --viewport-from: 320;
  --font-size-from: 32;
  --viewport-to: 960;
  --font-size-to: 48;
}

デフォルトではvw ビューポート幅の計算に使用されるが、vh , vmin or vmax . あなたが追加する必要があることに注意してください1 それぞれのユニットに1vh .
私は、これらの例が使用の大部分をカバーすることを望みます.

解説
数式は上記記事と同じですので、飛ばしましょう.

ポイント1
CSSカスタムプロパティの初期値と数式を設定する場合:root , 値継承のために予想される結果は得られません.我々はそれらを設定する必要があります* を適用します.

ポイント2
CSScalc() を追加することができますし、単位で値を減算、乗算し、それらを分割しないでください.Unitless値を計算した後にユニットを追加する必要があります.したがって、ほとんどの特性を単位なしで設定する必要がある.
我々は、単位で乗算して単位を追加することができます1 単位でvar(--fz-intercept) * 1px . これが理由である1vh 例10.

ポイント3
今のところ、CSSには条件式がありません.最大値または最小値が指定されたかどうかを判断する方法clamp() , min() and max() CSSカスタムプロパティフォールバックで.clamp() , min() and max() 引数が正しく渡されない場合は、空の値を返します.戻り値が空の場合、カスタムプロパティはフォールバックを参照します.

結論
これは私の他のプロジェクトの副産物ですが、それは非常に有用であることが分かった.私は、これが助けることを望みます.私の記事を読んでくれてありがとう.