clampの推奨値・最小値について

Question

clampについて、まだよく理解が出来てなく恐縮ですが、教えていただけますとありがたいです。

現在デザインカンプからのコーディングを勉強しています。
・レスポンシブのページ
デザインカンプのサイズ
・PC→1920px
・SP→375px

以下のような参考のcssがありました。
推奨値の計算の箇所ですが、自動で計算式を出してくれるジェネレーターのようなものでvwからpxが引かれるものが見当たらず、どのようにこのcssを書かれた方が算出したのかが分かりません。
vwからpxが引かれるジェネレーター等もご存知の方はいらっしゃいますでしょうか。

また、最大値は1920pxのデザインカンプで測ったらこの幅だったのですが、最小値はどこから算出したのかが計算をしてみても分からなかったです。

SPのデザインカンプを見ても最小値が分かりませんでした。

clampを使う場合、最小値は例えば768pxにPCのデザインカンプ自体を縮小してから測って、設定しているのでしょうか？

（変な聞き方をしているかもしれません）
よろしくお願いいたします。

max-width: clamp(609px, calc(61.0434782609vw - 1.4347826087px), 960px);

margin-bottom: clamp(50px, calc(5.2173913043vw - 2.1739130435px), 80px);

Answer 1

意図するところはコードを書いた人でないとわかりませんが、たとえば後者の式を解くとこうなります。

https://www.wolframalpha.com/input/?i=50%3Cx*.052173913043-2.1739130435%3C80&lang=ja

ビューポートが1000px以下の時に50px、1575px以上の時に80px、その間では線形に変化させたいのだろうな、と想像できます。違うのかもしれませんが。

---

前者についても解いてみると、同様のようでした。

https://www.wolframalpha.com/input?i=609%3Cx*.610434782609-1.4347826087%3C960&lang=ja

想像に想像を重ねると、1000px を下限としている計算ですから、これはPCサイズでリキッドレイアウトするためのものではないかな、と思います。609という数字は1000pxのビューポートでのレイアウト上の制約なのではありませんか。

ですので、モバイルサイズはメディアクエリを使って別に書かれているのではないかと思います。
モバイルサイズが別カンプで書かれているということはそもそもレイアウト自体が違うことになっていそうですし、clampを使って連続的なサイズ変更をするには馴染まないように思います。

Comments

[css_02025]

コメントをありがとうございます。参考にさせていただきます。たしかにモバイルサイズはメディアクエリを使って別に書かれていました。
私がいただいた内容（計算式）をすぐ理解できてなく、うまくコメントができなく恐縮ですが、がんばって読んで勉強させていただきます。このclampの記述者に質問が出来るか分からないのですが、機会がありましたら確認してみます。

[Lhankor_Mhy]

コメントありがとうございます。

不要かもしれませんが、このclampの計算方法を書いておきます。
ビューポート幅1000pxの時に50px
ビューポート幅1575pxの時に80px
の場合、
x/100*1000+y=50
x/100*1575+y=80
の連立方程式を解くことによって、clamp(50px, x vw + y px, 80px)と書くことができます。
この場合の解は、以下のようになります。
https://www.wolframalpha.com/input/?i=x%2F100*1000%2By%3D50%2Cx%2F100*1575%2By%3D80&lang=ja

または、「clamp calculator」でググるなどして適当な計算ページを見つけ、1rem=1pxで計算すれば、単位が違いますが正しい係数は出ます。