VH 対 VW 対 %: CSS 単位の違いは何ですか?

CSS 単位: vh/vw と % の区別の詳細

一般的な CSS 単位であるパー​​センテージ (%) は相対的な値を測定します要素の親コンテナに対して、vh と vw は異なる視点を示します。 vh (ビューポートの高さ) と vw (ビューポートの幅) は、それぞれビューポートの高さと幅に排他的に関係します。

% 単位とは異なり、vh と vw はビューポートとの一貫した関係を保証します。親要素のサイズに関係なく、100vh と 100vw は常にユーザーの表示画面領域の全高さと幅を表します。

次の例を考えてみましょう。高さ 200 ピクセルの親 div 内に高さ 100% の子 div はありません。ビューポートの高さが 200 ピクセルを超える場合は、必ずビューポート全体を埋める必要があります。ただし、高さを 100vh に設定すると、ビューポートの高さ全体を占めることが保証されます。

この区別は、さまざまな画面サイズや方向に適応する流動的なレイアウトで特に重要になります。 vh と vw は、ユーザーのビューポートを基準にして要素の寸法を定義する信頼性の高い方法を提供し、デバイス間で要素の比例関係と可読性を確実に維持します。

要約すると、vh と vw は、寸法を単に目的に固定する点で % 単位とは異なります。ビューポートで、サイズとレイアウトの両方で一貫性と応答性を提供します。この違いにより、Web 開発者は、多様な画面サイズにシームレスに適応し、さまざまなプラットフォームにわたるユーザー エクスペリエンスを向上させる Web サイトを作成できるようになります。

以上がVH 対 VW 対 %: CSS 単位の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。