css clamp (min, rem, max)

remのルール

・rem指定は<html>に対するfont-sizeが基準。font-sizeは基準なだけであってrem指定すればfont-family以外のプロパティへもrem値は適用される
・font-sizeの指定がない場合は 1rem

画面横幅に対応してremが変化する基準作り

1000pxの時 1rem = 10px、1440px のときは 1rem = 14.4px

html {
  font-size: calc(100vw / 100);
}

横幅1440pxの時 1rem = 10px

html {
  font-size: calc(100vw * 10 / 1440);
}

最小、最大値を決めておかないとどこまでも小さく、大きくなる

clamp - max - min

同じ意味

div{
   width: clamp(200px, 50%, 1000px);
}

div{
   width: max(200px, min(50%, 1000px));
}

div{
   width: 50%;
   min-width:200px;
   max-width:1000px;
}

・基本50%
・横幅が400をきっても200で固定
・横幅が2000を超えても1000で固定

組み合わせた実践的な使い方

html{
  font-size: calc(100vw / 100);
}
body{
  font-size: clamp(12px,1.6rem,16px);
}
div{
   padding-top: max(180px, 34rem, 340px);
}

・基本34rem
・最小値：180px
・最大値：340px