cssのcalcについて教えてください

質問

cssの初心者です。html、cssにおいて、メディアクエリを用いて、画面横サイズで600pxではfont size:1.0rem、1000pxでは1.5rem、中間の画素横サイズは比例計算として、calc関数を用いて実装したいと思っていますが、戸惑っています。
① font-size: calc(1rem + 0.5rem * ((100vw - 600px) /400px));
では機能しません。
　　1rem=18pxとして、
　　➁font-size: calc(18px + 9 * (100vw - 600px) /400);
では機能します。①の（100vw-600px)/400pxの箇所は例えば、画面横幅が800pxの際は値と単位が約分されて単位無の1/2となり、括弧の前の0.5remと掛け合わされ0.25rem。＋記号の前の1remと足し算され、結果1.25remとの理解ですが、結果として適用されていません。①がなぜ機能しないのか、remを基本で書き表すとどのように数式を作った方がよいのか教えてください。一応、➁でうまくいっていますので、calcを理解するための質問です。

回答No.2

retorofan · ベストアンサー

No.1です。
誤記につき訂正してお詫び申し上げます。
×①では、pxとremの異なる単位を混在させ式であるため、
〇①では、pxとremの異なる単位を混在させた式であるため、

回答No.1

retorofan

CSSのcalcについて
① font-size: calc(1rem + 0.5rem * ((100vw - 600px) /40;
　ー＞機能しない
➁font-size: calc(18px + 9 * (100vw - 600px) /400);
　ー＞機能する

Q ①がなぜ機能しないのか？

A 原因は、calc()関数の大原則が理解されていないためです。
すなわち、次の要件です。
calc()関数内で異なる単位を混在させて計算することはできない。

つまり、
①では、pxとremの異なる単位を混在させ式であるため、
計算することはできないのです。
また、
➁では、全ての値がピクセル単位であるため、
問題なく計算することができます。

具体的に述べてみましょう。
① font-size:calc(1rem + 0.5rem * ((100vw - 600px) / 400px));
　この式では、(100vw - 600px) / 400pxの部分が単位なしの数値を
　返すため、その結果を0.5remと掛けることができません。

➁font-size: calc(18px + 9 * (100vw - 600px) /400);
　この式では、(100vw - 600px) / 400の部分が単位なしの数値を返し、
その結果を9と掛けることができます。
その後、18pxと足し合わせることができます。
これは、「9 * (100vw - 600px) / 400」と「18px」が
どちらも同じピクセル単位の値を返すからです。

お礼

回答ありがとうございます。calc関数は異なる単位を混ぜ合わせて計算できる便利な関数と理解していましたが、今回のケースでは間違っていたことが分かりました。calc関数のルールを勉強し、活用したいと思います。

Powered by GRATICA