<section class="section">
  <h1 class="title">block1</h1>
</section>
<section class="section">
  <h1 class="title">block2</h1>
</section>
@mixin clampFunction($property, $minBp, $maxBp, $minVal, $maxVal) {

  $a: round(100 * ($maxVal - $minVal) / ($maxBp - $minBp));
  $b: round($minVal - ($minBp / 100) * $a);
  $vw: calc(#{$a}vw + #{$b}px);
  
  // フォールバック
  @supports not (#{$property}: clamp(#{$minVal}px, #{$vw}, #{$maxVal}px)) {
    #{$property}: unquote('max(#{$minVal}px, min(#{$vw}, #{$maxVal}px))'); 
  }
  #{$property}: clamp(#{$minVal}px, #{$vw}, #{$maxVal}px);
}

.section {
  padding: 1px 20px;
  background-color: #efefef;
}

.section + .section {
  @include clampFunction("margin-top", 375, 1280, 52, 136);
}

.title {
  @include clampFunction("font-size", 375, 1280, 16, 42);
}

.text {
  font-size: 16px;
  line-height: 1.7;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.