LoginSignup
52

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

Last updated at Posted at 2022-07-22

概要

W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更されました。

この変更では、ビューポート単位にLarge viewportSmall viewportDynamic viewportといったビューポートサイズの単位が追加されました。

今までは、vhvwなどで画面サイズに合わせての高さ、幅の指定していましたが、
これからは、lvhsvwといった単位で画面サイズに合わせての高さ、幅の指定できるようになります。

そのため、この記事では、追加された、ビューポート単位について解説していきます。

追加された背景

以前のiOS(Safari)では、
画面の高さいっぱいにようを表示したいという時に100vhで指定すると、
アドレスバーが表示された時、下がその分隠れて表示されてしまい、高さいっぱいにならない
という現象が起きていました。

その現象を解決してくれるのが、今回新しく追加されたビューポート単位、
Large viewportSmall viewportDynamic viewportです。

これらを使いこなすことができれば、100vhで高さいっぱいにならない現象を解決することができます。

追加されたビューポート単位

Large viewport

Large viewportの画像
Large Viewportは、動的に変化するコンテンツ(アドレスバーなど)が格納された時のビューポートサイズが基準になります。

そのため、アドレスバーなどのコンテンツが展開された時には、
そのコンテンツの背後にUIが隠れます。

Large viewportでは、lvwlvhlvminlvmaxが使えます。
それぞれ、

lvw:Large viewportのwidthが基準
lvh:Large viewportのheightが基準
lmin:Large viewportのwidthとheightの小さい方が基準
lmax:Large viewportのwidthとheightの大きい方が基準

になります。

Small viewport

Small viewportの画像
Small Viewportは、動的に変化するコンテンツが展開された時のビューポートサイズが基準になります。

そのため、アドレスバーなどのコンテンツでUI見えなくなることはありません。

Small viewportでは、svwsvhsvminsvmaxが使えます。
それぞれ、

svw:Small viewportのwidthが基準
svh:Small viewportのheightが基準
smin:Small viewportのwidthとheightの小さい方が基準
smax:Small viewportのwidthとheightの大きい方が基準

になります。

Dynamic viewport

Dynamic viewportの画像
Dynamic Viewportは、動的に変化するコンテンツ(アドレスバーなど)が、
格納された時、展開された時を考慮して、ビューポートサイズが変化します

そのため、格納された時、展開された時を顧慮せずにUIが、ビューポートサイズ内に収まるように
自動で調整してくれます。

Dynamic viewportでは、dvwdvhdvmindvmaxが使えます。
それぞれ、

dvw:Dynamic viewportのwidthが基準
dvh:Dynamic viewportのheightが基準
dmin:Dynamic viewportのwidthとheightの小さい方が基準
dmax:Dynamic viewportのwidthとheightの大きい方が基準

になります。

ブラウザの互換性

2022/07/22時点
iOS(Safari)とFirefoxには対応しています。

Data on support for the viewport-unit-variants feature across the major browsers from caniuse.com

まとめ

この記事では、W3CのCSS Values and Units Module Level 4で、追加されたビューポート単位について解説しました。

新しく追加されたビューポート単位では、特に、Dynamic viewportがよく使いそうです。

Smallの時だけ、Largeの時だけみたいなことがあれば、
意図的に、Small viewportLarge viewportを使いタイミングが出てきそうですね!


最後まで読んでくださってありがとうございます!
さらに詳しい内容を聞きたい方は、Devトークで直接お話しましょう!

X(Twitter)でも情報を発信しているので、良かったらフォローお願いします!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52