CodePen Embed - サイズレスポンシブ

<h1>サイズレスポンシブ</h1>

<div class="font-size-test">フォントサイズ最小14rem、最大20rem</div>
<div class="margin-test">マージン最小14rem、最大20rem</div>

:root {
  --size14: calc(14 / 16 * 1rem);
  --size20: calc(20 / 16 * 1rem);
}

.font-size-test {
  font-size: clamp(var(--size14), 0.818rem + 0.91vw, var(--size20));
}

.margin-test {
  margin: clamp(calc(14 / 16 * 1rem), 0.818rem + 0.91vw, calc(20 / 16 * 1rem));
}

This Pen is owned by ボヘミアン on CodePen.

See more by @bohe on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.