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

CSS 単位: vh/vw と % の違いを調べる

はじめに

CSS スタイルの領域では、要素の寸法を定義するためにさまざまな単位を使用できます。このうち、vh と vw は比較的新しい単位であり、より一般的なパーセント単位との類似性が認識されているため、混乱を引き起こしています。この記事では、これらのユニット間の根本的な違いを調査して、それぞれの固有のアプリケーション シナリオを明らかにします。

vh と vw: ビューポートの割合

質問が示すように、 vh (ビューポートの高さ) と vw (ビューポートの幅) は、それぞれ現在のビューポートの高さと幅のパーセンテージを測定する単位です。たとえば、100vh は現在のビューポートの高さの 100% を表します。

パーセント単位 (%): 親要素を基準

vh および vw とは対照的に、パーセント単位(%)は親要素のサイズに対する相対値を表します。これは、ビューポートのサイズに関係なく、100% の高さは常に要素の親の高さの 100% を表すことを意味します。

主要な区別要素: ビューポートの依存性

vh/vw と % の決定的な違いは、ビューポートへの依存性にあります。 vh および vw の単位は、ビューポートに合わせて動的に拡大縮小するように設計されており、ユーザーがブラウザ ウィンドウのサイズを変更したり、別のデバイスに移動したりしたときに、要素の寸法がそれに応じて調整されるようになります。

たとえば、要素の高さを 100vh に設定すると、次のことが保証されます。特定の画面解像度やデバイスに関係なく、ビューポートの高さ全体を埋めます。一方、100% の高さでは親要素の高さだけが埋まり、親の高さがビューポートよりも小さい場合、要素の下に空きスペースが残る可能性があります。

実践例

提供された HTML および CSS コード スニペットを考えてみましょう:

<div class="parent">
    <div class="child">100% height (parent is 200px)</div>
</div>
<div class="viewport-height">100vh height</div>

body, html { height: 100%; }
.parent { height: 200px; }
.child { height: 100%; }
.viewport-height { height: 100vh; }

このシナリオでは、子の高さを 100% に設定すると、親 div の高さ全体 (200px) が埋まり、下に空きスペースが残ります。ただし、viewport-height div の高さを 100vh に設定すると、親のサイズや画面解像度に関係なく、ビューポートの高さ全体が埋め尽くされます。

結論

vh/vw と % 単位は表面的には似ているように見えますが、ビューポートに対する根本的な依存関係によって区別されます。 vh および vw ユニットは、さまざまな画面サイズにシームレスに適応する応答性の高いレイアウトを作成する場合に特に役立ち、デバイス間で一貫したユーザー エクスペリエンスを保証します。

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