HTMLのコーディングをしている時に、「デザイン通りの文字サイズになっているか」とか、「デザイン通りの改行位置か」とか、細かくチェックをされるときがあると思います。
文字サイズに関しては、デザインデータで指定されている数値通りに設定されていれば、特に揉めることはないと思いますが、
こだわりの強いクライアントですと、「デザイン通りになっていない!」といった指摘がクライアントからある場合がまだまだあります。

「いやいやいや、テキストなんて基本的には流し込みなんだから、ユーザーの環境によって変わるに決まってるやん!」
なんて、心に思うことは多々ありますが、時々それを理解してもらえないケースもまだまだ多いんじゃないでしょうか。

PCサイトに関しては、表示領域を固定値で設定することが多いので<br>タグなどを使って適宜調整すればいいだけなので、まぁそんなに面倒ではないのですが、
スマホサイトになると、画面幅がユーザーの使っているスマホの画面サイズによって異なるので、すべての端末で改行位置を揃えるなんて無理だと思っていませんか?

実はそんなことありませんよ!
文字サイズを指定する時にちょっと工夫をすれば、ほぼデザイン通りの文字サイズと改行位置を簡単に再現することができます。

どうやって実現するのか。

答え:文字サイズの単位にvwという単位を使います。

vwとは。

vwとはviewport widthの略でviewportに対する割合の単位です。
画面の横幅を100とした時の割合で、画面幅MAXだと100vw。半分だと50vw。4分の1 だと25vwといった具合に単位を設定することができます。
※高さを指定するvhという単位もあります。

パーセント(%)で指定するのと何が違うの??

同じような感じで、パーセント(%)で指定することもありましたが、何が違うのかというと、
vwは画面幅に対しての割合であることに対して、パーセント(%)は所属している親要素のフォントサイズに対しての割合ということです。
子要素で幅100%を指定していても、親要素の幅が画面の50%の幅に設定されていた場合は、子要素も画面幅の50%の幅にしかなりません。

以下にサンプルを作ってみました。

パーセント(%)指定の場合は親要素のフォントサイズの半分の大きさになっていると思いますが、vwで指定した方は画面をリサイズすると文字サイズも変わります。
※埋め込みだとわかりにくい場合は下記のリンクを参照して下さい。
https://codepen.io/chieeeeno/pen/BYQQoR

See the Pen vwサンプル by tomoki (@chieeeeno) on CodePen.

この特性をスマホサイトの実装で利用すると、スマホの画面幅に応じて文字サイズを可変にすることができます。

どのように使えるのか。

コーディングを行う際には、事前にデザインカンプが出来上がっていることがほとんどだと思います。
このデザインで設定されている幅とフォントサイズで文字サイズの割合を計算することができるので、
それをフォントサイズに指定するのです。

例えば・・・
画面幅:640px
文字サイズ:20px
のデザインデータの場合、

20(文字サイズ) ÷ 640(画面幅) × 100 = 3.125vw

という風に計算することができます。

このように設定することで、デザインデータとほぼ同じ割合で文字サイズを設定することができます。

ただ、毎回電卓をはじいてサイズを計算するの面倒ですよね??
僕はそう思います。まじダルい!!

ということで、僕はこの文字サイズを計算してくれるmixinを作って設定しています。

作ったmixin

@mixin fontsizeVw($size){
  $winW : 640;  // 画面幅を設定する
  font-size: ($size / $winW) * 100 + vw;
}

$winWはデザインの画面幅に合わせて変えてください。

大した計算はしていませんが、地味に便利です。
実際、会社でこのmixnを紹介したところ、結構好評でした。

スマホサイトの実装でvwvhは使いこなすとすごく便利になるので、一度試してみてください。