もっと詳しく

レスポンシブWebデザインのCSSの覚書です。

【clamp】レスポンシブWebデザインのCSS(可変レイアウト)

メディアクエリではなくclampを利用しています。

font-size: clamp(1rem, 1rem + 1.1vw, 2rem);

vwのみの指定だと、zoomしたときに挙動がおかしいので固定値を入れることがポイントのようです。

スマホのボタンなどがフォントサイズが大きく改行されてしまう場合は中央の値をなるべくスマホよりにしておきます。

IE以外はサポートしているようです。

.fontawesome-icon {
  display: inline-block;
  width: clamp(25px, 1rem + 1.5vw, 50px);
  height: clamp(25px, 1rem + 1.5vw, 50px);
  font-family: 'Font Awesome 5 Free', sans-serif;
  font-size: clamp(12px, 1rem + 1.5vw, 20px);
  font-weight: 900;
  line-height: clamp(25px, 1rem + 1.5vw, 50px);
  border-radius: 36%;
}

円の中にアイコンをいれるCSSです。一部省略しています。

vwは同値じゃないとずれます。上記の例の場合、サイズ感は両脇にあるpxで調整するとよさそうです。

ぐぐってもgithubで調べても、サンプル自体がネット上にほぼ存在しませんでしたが、line-height:にclampはテストしたところ効いているっぽいです。

いつも目であわせてしまいますが、計算式ってありそうですね。。知りたいです。

参考