vw、vhと%の比較をしてみる

vw、vhとは

• vw…viewport heightの略
• vh…viewport heightの略

vw、vhでは、ビューポート（ブラウザの表示領域）の幅、高さに対する割合を指定できます。
100vw、100vhでブラウザの縦横いっぱいの指定になります。

%との違い

100vw、100vhでブラウザの縦横いっぱいの指定になります。

%と同じじゃない？と思いましたが、全然違いました。
vw、vhはブラウザの幅高さが基準となりますが、%は親要素が基準となります。

比較してみる

子に100%を指定したとき

親要素100pxに対して子要素に100%を指定しているので、100pxになります。

子に100vw、100vhを指定したとき

親要素100pxに関係なく、ブラウザの幅高さになります。

おわり

普段使用しない単位だったので、%との違いが知れてよかったです。
レスポンシブなサイト作成時にいいやーんと思いましたが、

• 100vwはスクロールバー分横にはみ出る。
• 100vhはアドレスバー分下にはみ出る。

等、問題もあるようなので、使うときは注意が必要ですね…🤔