CSSで指定できるフォントサイズの単位のひとつに、vw、vh があります。
viewportに応じてサイズが変わるのでレスポンシブなサイトで便利なのですが、指定が少しわかりづらいと思っていました。
●1vw = 画面の横幅を 100％ としたときの 1％分の幅
たとえば横 640px のデザインラフ上で 30px の文字は何vwになるのか、パッとはわかりません。
計算すると 4.68vw くらいなのですが、毎回計算するのも大変ということで
CSS上で直接計算するようにしてみました。
● font-size: calc(100vw / ( 640 / 30 )); /*30px*/
640 が「デザインラフの横幅」、30 が「デザインラフ上でのフォントサイズ」になります。
フォントサイズを変えるときもわかりやすいし、計算も不要で楽なのではないでしょうか。
コメントする