clampを使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定する方法

clamp(最小値，推奨値，最大値)を使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定する方法をご紹介します。

clampを使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定するCSS記述

※CSSのclamp()関数は左から最小値、推奨値、最大値の3つの値を設定できます。
以下は見出し（h1、h2）のfont-sizeをブラウザ幅の3vw=3%を推奨値として、ブラウザ幅3vwが12pxより小さい場合最小値12px、40pxより大きい場合最大値40pxを適用させます。
その他、画像エリア（div）のサイズはブラウザ幅（100vw=100%）が200px～1000px時はブラウザ幅の80vw=80%、ブラウザ幅80vwが200pxより小さい場合最小値200px、ブラウザ幅80vwが1000pxより大きい場合最大値1000pxを適用させる記述です。

<style>
body{
  padding: 0;
  margin: 0;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:bold;
  padding: 15px 0 0 0;
  font-size:clamp(12px, 3vw, 40px);
}
h2{
  line-height:1.6em;
  text-align:center;
  font-weight:bold;
  padding: 40px 0 6px 0;
  font-size:clamp(12px, 3vw, 40px);
}
div{
  width: clamp(200px, 80vw, 1000px);
  margin: 0 auto;
}
</style>

clampを使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定するHTML記述

※見出し（h1、h2）と画像エリア（div）を用意してます。必要に応じて変更して下さい。

<h1>見出しタイトルのfont-sizeはブラウザ幅の3vw=3%を推奨値として、ブラウザ幅3vwが12pxより小さい場合最小値12px、40pxより大きい場合最大値40pxを適用</h1>

<h2>以下の画像サイズはずブラウザ幅（100vw=100%）が200px～1000px時はブラウザ幅の80vw=80%、<br>ブラウザ幅80vwが200pxより小さい場合最小値200px、<br>ブラウザ幅80vwが1000pxより大きい場合最大値1000pxを適用</h2>
<div><img src="1.jpg" width="100%"></div>

clampを使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定するデモページ

clampを使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定するデモページ

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。