#css
cssに詳しい人教えてください。calcを駆使してるサイトを見つけました。例えば、padding:calc(20 / 640 * 100vw) calc(50 / 640 * 100vw)とか、font-size: calc(30 / 640 * 100vw)、line-height: calc(42 / 640 * 100vw)...などです。この数字に規則性がある様で、でもどうしてこの数字なのかわからないのです。。640掛ける100vwはどうしてしているんでしょうか...（サイト内に多用されています）また、それをさらに任意（？）の数字で割っているのですが、この数字はどこから出てくると予想されますでしょうか。。何か分かる方がいらっしゃいましたら、教えてください。よろしくお願いします。
一緒に読まれている質問
7 件の回答
例えば下記の場合
padding:calc(20 / 640 * 100vw)
横幅640pxの時に20px分のpaddingという意味 1280なら40px
vwの単位にしなくてもSassを使って％ですればpadding:percentage(20/640);でいけるので、
これぐらいの事ならブラウザに処理を任せずSassで先に計算しておくべきだとは思う。
Re:2
詳しくありがとうございます！20は20pxのpaddingのことだったんですね。
ちなみに、padding:percentage(20/640);で代入してみましたところ、若干だけcalcのときと余白が異なりましたが、でもほぼ似た様な結果で出ました。
ただブラウザ側から処理がなされるような、calcタグの様なものは、他のもので太陽できる場合はあまり多用しないほうがいいんですかね..。重さの原因にはなりそうだなと思いました。
メインビジュアル、padding以外のところでは、普通に%指定の方の方がいいのかもですね。。すみません、ありがとうございました！
Re:3
誤字多くてすみません。。
幅640固定でデザインされたものがデザイナーから上がってきて、それをレスポンシブでコーディングしなければならなくなり、計算めんどくさくなってそうしたんだろう。
%だと親要素のサイズに依存するからvwの方が固定できるから楽ってのもある。
全部が全部それだとちょっとどうなの？とは思うけど、%だとしんどい部分だけvw混ぜた、その書き方にするのはありだと思う。
レスポンシブフォントサイズやな