VW 対 VH 対 %: CSS でビューポート相対単位を使用する必要があるのはどのような場合ですか?

vh/vw と % を理解する: CSS におけるビューポート相対単位のガイド

% 単位は要素のパーセンテージを測定しますvw ユニットと vh ユニットは、親コンテナに対して、それぞれビューポートの高さと幅のパーセンテージを測定するように特別に設計されています。この区別は、要素の親コンテナがビューポート自体ではない場合に重要になります。

親コンテナの高さまたは幅が動的であるか、ビューポートと異なる場合、vw および vh 単位により一貫したサイズ設定が保証されます。たとえば、高さ 1000 ピクセルの親 div 内で要素が 100% の高さに設定されている場合、その実際の高さはビューポートのサイズによって異なる可能性があります。

逆に、同じ要素を 100vh に設定すると、常に高さが保証されます。親 div の寸法に関係なく、ビューポートの高さの 100% を占めます。これにより、レスポンシブ Web デザインで一貫性のないサイズ設定が発生する可能性がなくなります。

この違いを説明するには、次のコード サンプルを考えてみましょう。

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

この例では、親 div 内の子 div は次のようになります。高さは親 div の高さ (200px) の 100% です。ただし、ビューポートの高さの div は、親 div の高さが変更された場合でも、常にビューポートの高さの 100% の高さを持ちます。

したがって、vw および vh 単位は、要素のサイズ変更をより正確に制御します。ビューポートとの関係を調整できるため、さまざまな画面サイズやアスペクト比にシームレスに適応するレスポンシブな Web レイアウトを作成するのに特に便利です。

以上がVW 対 VH 対 %: CSS でビューポート相対単位を使用する必要があるのはどのような場合ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。