font-size

font-sizeには、px以外にも%,em,remなどが指定されている事がありますが、
改めて違いを整理しておきましょう。

1. px

言わずもがな、絶対値ですので、

font-size: 16px;

ならば、何がなんでも16pxですね。

2. %,em

こちらは相対値です。

親要素が基準となります。

html {
    font-size: 16px;
}
div {
    font-size: 100%;
}
div p {
    font-size: 50%;
    font-size: 0.5em;
}

どちらも親要素の半分ですので、pxに換算すと8pxとなります。

3. rem

こちらも相対値ですが、親要素ではなく、ルートが基準となります。

html {
    font-size: 14px;
}
div {
    font-size: 20px;
}
div p {
    font-size: 50%;
}

この場合、親要素の設定に関わらず、ルートのhtml要素の値を基準にしますので、結果は7pxです。

4. vw,vh

こちらはビューポートが基準となります。
どういうことかと言うと、100vw=ビューポートの幅=ブラウザの表示幅※viewport幅がdevice-widthのとき
という解釈です。

つまり、320px幅のスマートフォンで14pxに相当する設定としては、

(320 x 1/100) / 14 = 4.375vw

となります。要するに、端末の幅に応じて文字サイズを可変させることができます。

vhも同じように、ビューポートの高さを基準にして可変します。

Can I Useによるブラウザのサポート状況は下記

ご覧のように多くのモダンブラウザでサポートされています。
もちろんdiv要素などにも使用できますので、
レスポンシブデザインで端末サイズごとに可変する要素を作りたい場合には、
メディアクエリを細かく設定する以外の方法として、知っておくと良いでしょう。