質問: ### 前提・実現したいこと レスポンシブデザインのサイトで文字サイズが画面サイズに合わせて滑らかに変動するようビューポートを活用して文字サイズを指定したい ### 発生している問題・エラーメッセージ ``` 下記のコードを使って400px~1000pxの画面サイズで表示させて デベロッパーツールで確認すると font-size: calc(70%)が当範囲で一貫して適用されてしまいます。 (ウィンドウの大きさに関わらず当範囲では70%になってしまいます・・・) おそらくcalc内に問題があるのだと思いますが なにがいけないのかわかりません・・・ご教示願います。 ``` ### ``` テスト ``` ``` body{ font-size: 14px;} .test { font-size: 100%;} // 400px~1000pxの間では徐々に大きく @media screen and (min-width: 400px) { .test { font-size: calc(80%+20*(100vw-400px)/600);} } // 1,000px以上は、14pxに @media screen and (min-width: 1000px) { .test { font-size: 100%);} } ``` ### 補足情報(言語/FW/ツール等のバージョンなど) HTML5 CSS3
回答: 記述が間違っています。 こういったエラーはGoogleChromeのデベロッパーツールなどで、css style部を見ると 黄色い三角マークでプロパティーエラーと表示されます。 正しくは ``` font-size: calc(80% + 20 * (100vw - 400px) / 600); ``` 演算子の前後に半角スペースを入れるとエラーが無くなります。