min()関数：最大値を設定する
/* 親要素の50%で伸縮するが、500px以上にはならないようにする */
width: min(50%, 500px);画面幅に応じて動的に変化する値に対してあらかじめ最大値を設定する時に使う。
50%の値が500pxよりも大きい場合は500pxが使用され、50%の値が500px未満の場合は、50%が幅の値として使用される。
また、marginやpaddingなど、最大値を指定するプロパティが存在しない場合でもメディアクエリなしで最大値の設定ができるため、そうした場面で特に恩恵を受けることができる。
max()関数：最小値を設定する
/* 親要素の50%で伸縮するが、500px以下にはならないようにする */
width: max(50%, 500px);画面幅に応じて動的に変化する値に対してあらかじめ最小値を設定する時に使う。
50%の値が500px未満の場合は500pxが使用され、50%の値が500pxを超える値の場合は、50%が幅の値として使用される。
clamp()関数
画面幅に応じて動的に変化する値に対してあらかじめ最小値・最大値ともに設定しておく時に使う。
3つのパラメーター（最小値、推奨値、最大値）を使用。
/* 親要素の50%で伸縮するが、200px以下、1000px以上にならないようにする */
width: clamp(200px, 50%, 1000px);
/* 最小18px、最大36pxの間で画面幅に応じて伸縮するようにする */
font-size: clamp(18px, 2.8vw, 36px);幅は200pxを下回ることはない。中央の値（推奨値）は50%で、ビューポートの幅が400px以上2000px未満の場合のみ機能する。幅は1000pxを超えない。
clamp()関数は特に見出しなどのテキストをvwで指定して画面幅に応じて動的に拡大縮小させる際、最小値・最大値を設定しておきたいような場面で特に威力を発揮する。
clamp()関数でレスポンシブ対応
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法だが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができる。
font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);最小値が1rem、推奨値が0.818rem + 0.91vw、最大値が1.5remになり、推奨値はビューポートのサイズに応じて流動的になる。
【参考】
https://coliss.com/articles/build-websites/operation/css/css-clamp-calculator.html
【フォントサイズ、ビューポートの最小値と最大値を入力すると、自動的にcssを生成してくれるサイト】
https://min-max-calculator.9elements.com/
https://modern-fluid-typography.vercel.app/
font-sizeのrem単位をSassや関数で自動計算
html{font-size:62.5%}に設定する手法はハック的なやり方で問題がないわけでもないため、初期開発中も運用開始後もずっとSassなどの開発環境を維持できるのであれば、ルート要素の文字サイズは変更せず、px→remの自動計算をmixinや関数で作っておき、rem指定したいところではそれを使うようにするのも手。
@mixin fz($size){
font-size:($size/16)+rem;
}
@include fz(12); //mixinの呼び出し