cssのmin,max関数を使って、paddingを最大1vwから最小0pxまで可変にしたい

Question

実現したいこと

• paddingを最大1vwから最小0pxまで可変にしたいです

前提

現在cssのmin関数とmax関数の勉強をしています。
font-sizeでは下記の記述で「2.5vw」「50px」の小さい方が適用されると思いますが

font-size: min(2.5vw, 50px);

次のように書いた場合paddingは1vwから変化しませんでした。

.pdg{
padding: min(1vw, 0px);
}

<div class="pdg">Lorem ipsum</div>

本題

paddingをブラウザの横幅に合わせ、広い場合は最大1vwから、
ブラウザ幅が狭い場合は最小0pxまで可変させる事は可能でしょうか？

私はmin()max()の挙動の何を勘違いしているのでしょうか？

Comments

[hatena19]

min は最小の値を採用するので min(1vw, 0px); なら常に0pxになるはずです。1vwにはなりません。
実際のHTMLとCSSを提示してどのようにしたいのか具体的に説明してください。

[recal]

申し訳ありません
･paddingを最大1vwから最小0pxまで可変にしたいです、や
･paddingを最大1vwから最小0pxまで可変させる事は可能でしょうか？
では伝わりませんか？

[hatena19]

ブラウザの画面幅に対して、どのような対応で可変するかの説明が必要でしょう。
Paddingが1vwになるの時の画面幅、例えば1200px以上とか
Paddingが0pxになるときの画面幅、例えば400px以下とか

何にしても min()ではどちらか最小の値を採用するので可変はしません。0pxより小さい幅はないので常に0pxです。

[recal]

>0pxより小さい幅はないので常に0pxです。
そうなんですよね、ありがとうございます。

Answer 1

たとえば、
padding: clamp(0px, 2vw - 10px, 1vw);
のようにすれば、500pxまでは0px、1000pxを超えると1vw、その間は線形に変化します。

なお、clampはmin maxで代替できます。
clamp() - CSS: カスケーディングスタイルシート | MDN | clamp() - CSS: カスケーディングスタイルシート | MDN

Comments

[recal]

ありがとうございます！
2vw - 10pxがどうゆう意味でそう記述されているのか理解できませんでした
この部分の意味を教えていただけますか？

[recal]

わかりました
1000pxの2%(20px)ー10px
500pxの2%(10px)ー10px
ですね
すごいですありがとうございました！