Calc()を使用して、単位ベースの値(100%、5pxなど)で乗算または除算することは可能ですか?.
たとえば、私はこのようなことをしたいと思っていました:
width: calc(100% * (.7 - 120px / 100%));
それが次のようなものに解決されることを望んでいます(100%= 500pxと仮定):
width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);
しかし、いくつかの実験の後、除算の分母として単位ベースの値を持つことができないように見えます。
5px * 10px
や5px * 100%
のように、2つの値を一緒に複数使用することもできないようです。
これを許可するのは100%のケースでは意味をなさないことはわかっていますが、ユースケースでは、幅全体の120pxのパーセンテージを知りたいので、残りの部分にフィードします計算。
それ、または誰かがそれを書く別の方法を見つけ出すことができれば、それもうまくいくでしょう。私は頭を悩ませたが、何も思い付かなかった。
CSS calc()除算-右側は<number>
でなければならないため、このような除算では単位ベースの値を使用できません。
また、乗算では、少なくとも1つの引数が数値でなければならないことに注意してください。
[〜#〜] mdn [〜#〜] にはこれに関する素晴らしいドキュメントがあります。
計算を行うより良い方法が必要な場合は、プリプロセッサを使用できます( Sass が好きです)。そのリンクからガイドに移動します(そのページには、オペレーターに関するセクションがあります)。