最新の CSS におけるビューポートの高さと幅の単位

従来のビューポート単位 vh と vw のみを使用する CSS コードベースとテーマ定義に頻繁に遭遇するため、現在自由に使える強力なツールについてブログ記事を書こうと思いました。それは私たちの生活を楽にし、CSS コードをより良くすることができます。

古き良きビューポートユニット

簡単に言うと、私たちは長年にわたって vh と vw を使用して、初期ビューポートの高さと幅のパーセンテージとして何かを定義してきました。たとえば、すべてのデバイスのビューポート全体を緑色で塗りつぶしたい場合は、次のようにすることができます:

.big-fat-green-element {
  background: green;
  height: 100vh;
  width: 100vw;
}

..これでおそらくうまくいくでしょう。ただし、これが確実に機能するのは、何らかの理由で表示されているビューポートに何らかの影響が生じるまでです。たとえば、最新のモバイル ブラウザのほとんどは、ユーザーがページのスクロールを開始するとタイトル バーとアドレス バーの一部またはすべてを非表示にし、ビューポートにも影響を及ぼし、大きな太い緑色の要素のサイズが小さくなります。

最新のビューポート ユニット

現在、最新の CSS 仕様では、いわゆるラージ、スモール、ダイナミック ビューポート ユニットを安全に使用できます。

大型ビューポートユニット

大きいビューポートのパーセント単位 (lv*) とデフォルトのビューポートのパーセント単位 (v*) は、大きいビューポートのサイズに関して定義されています。ビューポートのサイズは、動的に展開および縮小される UA インターフェイスが縮小されることを想定しています。

本質的に、lvh と lvw は、ブラウザー UI が最小で、Web サイトのコンテンツが最大の状態であるときのビューポートに対するパーセンテージとして使用できる単位を与えます。 lvh と lvw は、実際には従来の vh および vw ユニットと同じ動作をします。

例: lvh 単位と lvw 単位を使用する例は、ページ全体の背景として機能する要素の高さと幅を定義することです。

/* Full-page background using largest available viewport height and width, regardless of other elements or browser UI state. */
.full-page-background {
  height: 100lvh;
  background: #f51;
  position: fixed;
  top: 0;
  left: 0;
  width: 100lvw;
  z-index: -1; /* Ensure it stays behind other content */
}

小さなビューポートユニット

小さいビューポートのパーセント単位 (sv*) は、小さいビューポート サイズに関して定義されます。ビューポートのサイズは、動的に展開および展開されるために格納される UA インターフェイスを想定しています。

言い換えると、svh と svw は、ブラウザ UI が最大の状態で、Web サイトのコンテンツが最小の状態であるときに画面を埋めるために使用できる単位を提供します。

例: svh ユニットを使用する良い例は、固定下部バーまたは静的ヘッダーの高さを定義することです。

/* Header with static height, 10% of the smallest available viewport 
 * e.g. when the browser UI is visible on mobile devices */
.header {
  height: 10svh;
  background-color: #642;
}

動的ビューポートユニット

動的ビューポートのパーセント単位 (dv*) は、動的ビューポート サイズに関して定義されます。ビューポートのサイズは、動的に展開および縮小される UA インターフェイスを動的に考慮して決定されます。

動的ビューポートのパーセント単位のサイズは、ビューポート自体が変更されていない場合でも安定しません。これらの単位を使用すると、コンテンツのサイズが変更される可能性があります。ユーザーがページをスクロールしている間。使用状況によっては、これはユーザーにとって迷惑になる場合や、パフォーマンスの面でコストがかかる場合があります。

dvh および dvw 単位は理想的に聞こえるかもしれませんが、上記の定義に記載されている注意点と、スクロール要素でそれらを使用するときに発生したいくつかの問題を考慮して、非常に特殊な状況でのみ使用すべきであるという結論に至りました。

例 1: dvh を使用する例は、ビューポートの変更ごとに調整する必要があるコンテンツ要素の高さを定義することです。

/* Main content adjusts dynamically. 
 * Since we used dvh the element height will align with the actual viewport and adapt to its changes */
.adjustable-content {
  background-color: #895;
  height: calc(100dvh - 10svh); /* Adjust height considering header */
  overflow: auto;
  padding: 10px;
}

例 2: 先週、フォームがビューポートの高さと幅全体を占有する間、仕様によりスクロールが無効になっているというバグが報告されたとき、このケースがありました。このバグは、モバイル ユーザーが入力に集中するとデバイスのキーボードが表示されるときに発生しました。その場合、フォームのレイアウトが崩れてしまいます。修正は、高さの定義に vh の代わりに dvh を使用することでした。

コードペンと例

最後に、最新のビューポート ユニットの動作を確認できるコードペンを紹介します。お楽しみください!

以上が最新の CSS におけるビューポートの高さと幅の単位の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。