un-T factory! XA Advent Calendar 15日目の記事です。
レスポンシブWebデザインでいざコーディング！と意気込んだのもつかの間、
以下のようにスマホビューで表示崩れが起こってしまうことがあります。
今までは指定のフォントサイズを少し下げて対応していました。
が、フォントサイズを端末幅に対して相対指定（vw）できることを知ったので試してみると…
収まりました！
設定方法
vw（viewport width）とは、ビューポート幅に対しての割合のことです。
ということは、ビューポート幅に対するフォントサイズの割合を計算する必要があります。
↓計算のしかた
例：viewport：640px font-size：12px の場合
12px / 640px * 100 = 1.875vw
あとは値をCSSで指定するだけです。簡単！
font-size: 1.875vw;
注意すること
vw指定は画面幅に応じてサイズが可変していきます。
他のパーツも%指定にしておかないと、ありがたみを全く感じられない結末になります。
うまく利用して、スマホビューでの表示崩れとおさらばしたいものです。