CSS の「vh/vw」単位と「%」単位の主な違いは何ですか?

CSS 単位の vh/vw と % の違い

vh や vw などの CSS 単位は、開発者に要素を定義するための多彩なオプションを提供しますビューポートを基準とした寸法。ただし、より伝統的な % 単位との類似点により、その区別性について疑問が生じる可能性があります。

vh と vw について

vh (ビューポートの高さ) と vw (ビューポートの幅)は、それぞれ表示領域の高さと幅のパーセンテージを表す単位です。たとえば、100vw は、デバイスの実際の画面サイズに関係なく、ビューポートの幅の 100% を意味します。

% との比較

一見すると、vh/vw 単位は同じように見えます。 % は一部の親要素のパーセンテージも表すため、冗長です。ただし、重要な違いは参照枠にあります。

高さとビューポートの高さ

% 単位は通常、親要素の高さを基準とした寸法を測定します。 。たとえば、高さが 100% の子要素は、ビューポートのサイズに関係なく、親要素の高さ全体を占めます。

対照的に、vh および vw 単位は、ビューポートの高さと幅に対する相対的な寸法を測定します。これは、親要素のサイズに関係なく、100vh 要素が常にビューポートの高さの 100% を占めることを意味します。

例

高さのある親 div 要素を考えてみましょう。 200px で、子 div 要素は高さ 100% に設定されます。通常、100% は「親の 100%」を意味しますが、この場合、子 div はビューポートの高さを超えてしまう可能性があります。

ただし、子 div が 100vh に設定されている場合、常に占有されます。ビューポートの高さの 100% であり、さまざまなビューポート サイズにわたって完全に応答性が高く、一貫したレイアウトが保証されます。

以上がCSS の「vh/vw」単位と「%」単位の主な違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。