Clamp()、Max()、および Min() 関数
— クランプ()関数の機能は、上限と下限の間の値を制限することです.この値が最小値と最大値の範囲を超える場合、最小値と最大値の間の値を選択して、使用。最小値、優先値、最大値の 3 つのパラメーターを受け取ります。
流体のサイズと向き
次の例では、携帯電話スタイルがあり、次のように 2 つの写真が同時に配置されています。
コンテナの幅が狭くなると、写真のサイズを縮小して、変形しないでください。通常、幅: 20% などのパーセンテージ単位を使用して解決しますが、この方法ではあまり制御できません。
最小値と最大値を必要とする流体サイズを使用できるようにする必要があり、これがクランプの出番です。
.section-image {
width: clamp(70px, 80px + 15%, 180px);
}
デモアドレス: https://codepen.io/shadeed/pen/qBYPdOq?editors=1100
装飾的な要素
ページの隅に装飾的な要素を追加する必要がある場合があります.装飾的な要素は、PC 側ではこのようにレスポンシブである必要があります (黒い点の部分): モバイル側では次のようになります
:
.decorative--1 {
left: 0;
}
.decorative--2 {
right: 0;
}
@media (max-width: 600px) {
.decorative--1 {
left: -8rem;
}
.decorative--2 {
right: -8rem;
}
これは機能しますが、より簡潔な関数をclamp()できます。
.decorative--1 {
left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
.decorative--2 {
right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
デモアドレス: アドレス例: https://codepen.io/shadeed/pen/LYmzVZW?editors=1100