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

## 概要
W3Cの[CSS Values and Units Module Level 4](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths)で、ビューポート単位についていくつか仕様が変更されました。

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

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

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




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

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

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


## 追加されたビューポート単位
### Large viewport
![Large viewportの画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/daa1ef18-d9cf-03cb-224e-a5af79810174.png)
Large Viewportは、動的に変化するコンテンツ(アドレスバーなど)が格納された時のビューポートサイズが基準になります。

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


Large viewportでは、`lvw`・`lvh`・`lvmin`・`lvmax`が使えます。
それぞれ、

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

になります。

### Small viewport
![Small viewportの画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/55344c89-4787-0875-9ed3-218a0dd23c0f.png)
Small Viewportは、動的に変化するコンテンツが展開された時のビューポートサイズが基準になります。

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


Small viewportでは、`svw`・`svh`・`svmin`・`svmax`が使えます。
それぞれ、

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

になります。

### Dynamic viewport
![Dynamic viewportの画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/91264134-4ef5-2c69-85ee-2e00588f4200.png)
Dynamic Viewportは、動的に変化するコンテンツ(アドレスバーなど)が、
格納された時、展開された時を考慮して、ビューポートサイズが変化します

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

Dynamic viewportでは、`dvw`・`dvh`・`dvmin`・`dvmax`が使えます。
それぞれ、

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

になります。

## ブラウザの互換性

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

<p class="ciu_embed" data-feature="viewport-unit-variants" data-periods="future_2,future_1,current,past_1,past_2" data-accessible-colours="false">
<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/viewport-unit-variants.webp">
<source type="image/png" srcset="https://caniuse.bitsofco.de/image/viewport-unit-variants.png">
<img src="https://caniuse.bitsofco.de/image/viewport-unit-variants.jpg" alt="Data on support for the viewport-unit-variants feature across the major browsers from caniuse.com">
</picture>
</p>


## まとめ
この記事では、W3Cの[CSS Values and Units Module Level 4](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths)で、追加されたビューポート単位について解説しました。

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

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

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510