###前提・実現したいこと
レスポンシブデザインのサイトで文字サイズが画面サイズに合わせて滑らかに変動するようビューポートを活用して文字サイズを指定したい
###発生している問題・エラーメッセージ
下記のコードを使って400px~1000pxの画面サイズで表示させて デベロッパーツールで確認すると font-size: calc(70%)が当範囲で一貫して適用されてしまいます。 (ウィンドウの大きさに関わらず当範囲では70%になってしまいます・・・) おそらくcalc内に問題があるのだと思いますが なにがいけないのかわかりません・・・ご教示願います。
html
1<div class="test" > テスト</div>
css
1body{ font-size: 14px;} 2.test { 3 font-size: 100%;} 4 // 400px~1000pxの間では徐々に大きく 5 @media screen and (min-width: 400px) { 6 .test { font-size: calc(80%+20*(100vw-400px)/600);} 7 } 8 // 1,000px以上は、14pxに 9 @media screen and (min-width: 1000px) { 10 .test { font-size: 100%);} 11 }
###補足情報(言語/FW/ツール等のバージョンなど)
HTML5
CSS3
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/02/22 04:09
退会済みユーザー
2017/02/22 04:23
2017/02/22 04:27