min()

width と max-width を1行で記述できる。下記2つは同じ。

width: min(100%, 500px);
width: 100%;
max-width: 500px;

max()

width と min-width を1行で記述できる。下記2つは同じ。

width: max(80%, 500px);
width: 80%;
min-width: 500px;

clamp()

最小値、推奨値、最大値の3つを記述できる。

width: clamp(500px, 50%, 1000px)
min-width: 500px
max-width: 1000px
※500px と 1000px の間は 50%

コメントを残す

メールアドレスが公開されることはありません。