vw, vh, vmin, vmax という単位があるのをつい最近知りました。
随分昔からあったものらしいですが、大変便利なものだったので書いておこうと思います。
上記4つの単位はそれぞれブラウザのビューポートに対する (割合) パーセンテージを指定する単位です。具体的な定義は次の通りです。

単位	説明
vw	ビューポートの幅に対する割合
vh	ビューポートの高さに対する割合
vmin	vw と vh の小さい方に対する割合
vmax	vw と vh の大きい方に対する割合

活用例

iPhone6 を例にするとビューポートの幅が375px。このとき100vw が 375px、1vw は 3.75px 相当のサイズになります。
画面サイズ幅一杯の正方形な要素が作りたい時とか

{
    width: 100vw;
    height: 100vw;
}

であったり、画面いっぱいのモーダルも、親要素に影響されることなく

{
    width: 100vw;
    height: 100vh;
}

のような感じで作ったりできますね。
他にも、モバイル向けのコーディングでは、フォントサイズやマージンに vw や vmin を使用することで、デバイスサイズに依って段組を崩したくないようなデザインのレイアウトが楽に実装できるようになります。
例えば幅が320pxを想定したデザインカンプに合わせてコーディングすると、iPhone6や6+、Android 端末では段組が変わるか、余白が変わるかだったりします。画像とテキストが横並びのパターンの場合、画像サイズが固定でテキストがリキッドになるケースも多いです。
Bootstrap の Media object や Foundation の Media Object みたいな感じですね。これを vmin ベースでコーディングしていくと、もっと自然なレスポンシブになります。例えばデザインカンプで縦横64pxの画像があった時、

{
    width: 20vmin;
    height: 20vmin;
}

と指定しておくと、どんなデバイスで見ても大体いい感じになります。因みに上記を iPhone6 で見た場合は縦横75px、iPhone6+ で見た時は縦横82pxになります。
フォントサイズやマージンパディングなんかも同様で、アホみたいにカンプサイズ通りにコーディングしていくだけで、大抵のモバイルブラウザでいい感じになっていきます。
vmin を使っておけば、横向きの時でもこれまたいい感じです。ハッピー。

んで、こいつを foundation の rem-calc みたいに使えたら便利だなと思って、作ってみました。
vwxyutarooo/gulp-web-starter/…/vmin-calc – GitHub
$base にカンプの幅、 375px とか 320px とかをセットします。あとはカンプのサイズ通りに

{
    width: vmin-calc(64px);
    height: vmin-calc(64px);
}

とかすれば全てうまくいきます。ハッピーですね。

因みに、フォントサイズに関しては本文などにもビューポート系の単位を使ってしまうと、iPhone5系の画面サイズで文字が小さすぎたり、iPhone+ 系や Android の画面サイズでデカすぎたりするので、場所によってはこれらの単位を使用しないほうが良さそうだなと個人的には思います。

気になるブラウザ対応ですが、Can I use の通りモバイル端末であれば殆どカバーしています。素晴らしい。