みかづきブログ その3

3ヶ月つづけてみました。

親のサイズに依存することなくviewportのサイズ基準でDOMの大きさを指定する。

vw, vh, vmax, vmin をつかえばらくらく指定できます。


vw, vh

親のサイズに依存することなく、viewportを基準にサイズを指定できる単位です。

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

と指定すればviewportのサイズに対して100%、

.viewport {
    width: 50vw; height: 50vh;
}

と指定すればviewportのサイズに対して50%のサイズを指定できます。
スマートフォン向けのサイトをつくる際には非常に便利ですね。

ただし、Androdは4.4から対応(iOSは6)ということなので対応ブラウザには注意しなければなりません。


DEMO


vmax, vmin

vmaxはviewportの縦横のうち長い方、vminはviewportの縦横のうち短い方基準でサイズを指定できます。個人的にはまだ使いどころがわかっていません。