CSS

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の最小値、推奨値、最大値を設定するデモページ

ブラウザや画面幅に対してfont-size等の比率を保って可変するので、メディアクエリを使用せずに最小値、推奨値、最大値サイズを設定出来るので便利です。

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