CSS ビューポート単位: CSS *vh (dvh、lvh、svh) および *vw 単位

CSS ビューポート ユニットは、さまざまな画面サイズに適応するレスポンシブなレイアウトを作成するために不可欠です。これらのユニットはビューポートの高さと幅を基準にして寸法を測定するため、開発者は柔軟で適応性のある Web インターフェイスを設計できます。このガイドでは、従来の vh および vw ユニットを取り上げ、dvh、lvh、svh などの新しいユニットを紹介し、それらがどのように応答性を高め、ビューポートの変更をより効果的に処理するかを説明します。

1. CSS のビューポート ユニットとは何ですか?

ビューポート単位は、ブラウザのビューポートのサイズに動的に調整される相対単位です。最も一般的に使用されるのは次のとおりです:

• vh: ビューポートの高さの 1%。
• vw: ビューポート幅の 1%。

これらのユニットを使用すると、ブラウザ ウィンドウのサイズに合わせて拡大縮小する要素を簡単にデザインできます。例:

この例では、div はビューポートの幅の半分と高さ全体に及びます。

2.従来の vh および vw の制限事項

vh と vw はほとんどのシナリオで適切に機能しますが、次のようなビューポート内の特定の動的変更は考慮されていません。

• モバイル デバイス上のブラウザのアドレス バーまたはナビゲーション コントロールの外観。
• デバイスの向きまたはブラウザ ウィンドウのサイズ変更によって引き起こされる変更。

これらの制限により、特にモバイルでは、デザインに一貫性がなくなったり、意図しないレイアウトの問題が発生したりする可能性があります。

3.新しいビューポート単位: dvh、lvh、および svh

これらの問題に対処するために、CSS は 3 つの新しい単位、dvh (動的ビューポートの高さ)、lvh (大きいビューポートの高さ)、および svh (小さいビューポートの高さ) を導入しました。

動的ビューポートの高さ (dvh)

dvh は、ブラウザー UI 要素の表示または非表示など、ビューポート内の変化に動的に調整します。現在のビューポートの高さの 1% を表し、レイアウトがリアルタイムで適応されるようにします。

例:

これにより、ブラウザー UI が変更された場合でも、div が常に表示領域に収まるようになります。

大きなビューポート高さ (lvh)

lvh は、動的な UI の変更 (モバイル アドレス バーなど) を無視して、ビューポートの最大の高さの 1% を表します。

例:

これは、ブラウザー UI の変更に関係なく、一貫性を維持する必要があるレイアウトに役立ちます。

小さいビューポート高さ (svh)

svh は、ブラウザー UI が画面のかなりの部分を占めるシナリオに対応する、可能な限り最小のビューポートの高さの 1% を表します。

例:

このユニットは、キーボード ポップアップなどの UI 要素によって表示領域が縮小される可能性があるデバイスを扱う場合に特に役立ちます。

4.ビューポート幅 (vw)

vw はビューポート幅の 1% を測定します。一貫性が保たれ、スクロールや UI の外観などの動的な変更の影響を受けません。

例:

これは、横型レイアウトまたは全幅デザインに最適です。

5.実際の使用例

これらの単位を実際のシナリオにどのように適用できるかは次のとおりです:

レスポンシブヒーローセクション

これにより、モバイル アドレス バーが表示されたり非表示になったりする場合でも、ヒーロー セクションが常に画面に収まるようになります。

フルページモーダル

svh を使用すると、オンスクリーン キーボードによってビューポートの高さが低くなった場合でもモーダルを使用できるようになります。

スティッキーフッター

さまざまなデバイス間でサイズを維持するスティッキー フッター。

6.ユニットを組み合わせて最大限の柔軟性を実現

これらのユニットを組み合わせて、より適応性のあるデザインを実現できます。例:

このアプローチにより、デザインがすべての考えられるビューポート シナリオに確実に適応します。

7.ブラウザのサポート

vh と vw はブラウザー全体で広くサポートされていますが、dvh、lvh、および svh は新しく追加されたものです。ブラウザの互換性を必ず確認し、古いブラウザのフォールバックを提供してください。

フォールバックの例:

8.結論

vh、vw、dvh、lvh、svh などの CSS ビューポート ユニットは、応答性が高く適応性のある Web デザインを作成するための強力なツールです。 vh と vw はほとんどのケースに対応しますが、新しい dvh、lvh、および svh ユニットは、特にモバイル デバイスでの制限に対処します。これらの単位を理解して活用することで、モバイル アプリ開発者は、あらゆるデバイスやシナリオで機能するシームレスでユーザー フレンドリーなデザインを作成できます。

以上がCSS ビューポート単位: CSS *vh (dvh、lvh、svh) および *vw 単位の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。