【CSS】ビューポート単位が新しく追加されました。 - Qiita

概要 W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更されました。 この変更では、ビューポート単位にLarge viewport、Small viewport、Dynamic viewportといったビューポートサイズの単位が追加されました。 今までは、vhやvwなどで画面サイズに合わせての高さ、幅の指定していましたが、 これからは、lvhやsvwといった単位で画面サイズに合わせての高さ、幅の指定できるようになります。 そのため、この記事では、追加された、ビューポート単位について解説していきます。 追加された背景 以前のiOS(Safari)では、 画面の高さいっぱいにようを表示したいという時に100vhで指定すると、 アドレスバーが表示された時、下がその分隠れて表示されてしまい、高さいっぱいにならない という現象