CSS vwの単位は何ですか?

CSS では、vw は長さの単位であり、ビューポート単位はビューポートに対する相対的な幅を指します。ビューポートは vw の 100 単位に分割され、1vw はビューポートの幅の 1 に等しくなります % , たとえば、ブラウザの幅が 1920px の場合、「1vw=1920px/100=19.2px」となります。

#(推奨チュートリアル:

CSS ビデオ チュートリアル)

ビューポート ユニット

ビューポートとは何ですか?

PC 側では、ビューポートはブラウザの表示領域を指します。

モバイル側では、レイアウト ビューポート (レイアウト ビューポート)、ビジュアル ビューポート (ビジュアル ビューポート)、理想的なビューポート (理想的なビューポート)。

ビューポート単位の「ビューポート」とは、PC側ではブラウザの表示領域を指し、モバイル側ではビューポート内のレイアウトビューポートを指します。

CSS3 仕様によると、ビューポート単位は主に次の 4 つの単位で構成されます。

1.vw: ビューポートの幅に応じて、ビューポートは vw の 100 単位に均等に分割されます。 、1vw はビューポートに等しく、口の幅の 1% です。

2.vh: ビューポートの幅に対して、ビューポートは 100 単位の vh に分割され、1vh はビューポートの高さの 1% に相当します。

3.vmin: vw と vh の間で最小のものを選択します。

4.vmax: vw と vh の間で最大のものを選択します。

vw および vh

正式名称は、ビューポート幅とビューポート高さです。ウィンドウの幅と高さは、画面の幅と高さの 1% に相当します。

vh および vw: 親要素ではなく、ビューポートを基準とした高さと幅 (CSS パーセンテージは、それを含む最も近い親要素の高さと幅を基準としています)。 1vh はビューポートの高さの 1/100 に等しく、1vw はビューポートの幅の 1/100 に等しい。

例: ブラウザの高さは 950px、幅は 1920px、1 vh = 950px/100 = 9.5 px、1vw = 1920px/100 =19.2 px。

vh/vw と %

コード:

<style>
body{background-color:orange;}
.p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}
</style>

<p class="p">P 标签的宽度为 50vw</p>

効果:

説明:

1 vw はページ幅の 1% に相当します。たとえば、ページ幅が 1000px の場合、1vw

は 10px となり、vh も同じになります。

P タグの幅は 50vw なのでページ幅の 50%、高さは 50vh なので

はページ高さの 50% です。

プログラミング関連の知識について詳しくは、

プログラミング学習をご覧ください。 ！

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