<p>（１）widthにclamp関数を指定しています。基本的な幅は80vwでレスポンシブルですが、小さくなっても100px、大きくなっても500pxまでに制御できます。</p>
<div class="clamp1 box">
</div>
<br>
<p>（２）フォントのサイズの最大値、最小値を指定できます。基本的なサイズは3vwで指定していますが、小さくても12pxまで、大きくなっても20pxまででサイズを制御できています。</p>
<div class="clamp2">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
.clamp1{
width:clamp(100px, 80vw, 500px);
}
.clamp2{
font-size:clamp(12px, 3vw, 20px);
}
.box{
border:1px solid #ddd;
background-color:#efefef;
height:100px;
}
View Compiled
