-
1:ID:9DQNB3 · 2週間前

#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 件の回答

2:ID:b6DGp3 · 2週間前

例えば下記の場合
padding:calc(20 / 640 * 100vw)
横幅640pxの時に20px分のpaddingという意味 1280なら40px
vwの単位にしなくてもSassを使って%ですればpadding:percentage(20/640);でいけるので、
これぐらいの事ならブラウザに処理を任せずSassで先に計算しておくべきだとは思う。

3:ID: · 2週間前

Re:2
詳しくありがとうございます!20は20pxのpaddingのことだったんですね。
ちなみに、padding:percentage(20/640);で代入してみましたところ、若干だけcalcのときと余白が異なりましたが、でもほぼ似た様な結果で出ました。
ただブラウザ側から処理がなされるような、calcタグの様なものは、他のもので太陽できる場合はあまり多用しないほうがいいんですかね..。重さの原因にはなりそうだなと思いました。
メインビジュアル、padding以外のところでは、普通に%指定の方の方がいいのかもですね。。すみません、ありがとうございました!

4:ID: · 2週間前

Re:3
誤字多くてすみません。。

5:ID:fZqyGx · 2週間前

幅640固定でデザインされたものがデザイナーから上がってきて、それをレスポンシブでコーディングしなければならなくなり、計算めんどくさくなってそうしたんだろう。

6:ID:VRb6YH · 2週間前

%だと親要素のサイズに依存するからvwの方が固定できるから楽ってのもある。

7:ID:5S9ho2 · 2週間前

全部が全部それだとちょっとどうなの?とは思うけど、%だとしんどい部分だけvw混ぜた、その書き方にするのはありだと思う。

8:ID:XiXCsm · 2週間前

レスポンシブフォントサイズやな

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る