ホームページ > 記事 > ウェブフロントエンド > CSSのvwとは何ですか
CSSのvwとは何ですか
- WBOYオリジナル
- 2022-04-18 16:01:304914ブラウズ
CSS では、vw はウィンドウ単位と相対単位であり、ウィンドウの幅のパーセンテージを意味します。vw はウィンドウの幅に対する相対単位であり、ウィンドウはクライアントの表示領域です。ウィンドウは 100 単位に分割され、1vw のサイズはウィンドウの幅の 1 パーセントになります。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css の vw とは
CSS 単位は、サイズ単位や色の単位を含む測定単位です。さまざまなビューで Web ページのレイアウトが混乱するのを避けるために、私たちは多くの場合、対面ユニットを使用します。
vw はビューポートの幅の略語で、1vw は常に現在のビューポートの幅の 1 パーセントに等しくなります。 vw はウィンドウ単位であり、相対単位です。ビューポートは、幅に応じて vw の 100 単位に分割されます。
vw の利点は幅を直接取得できることですが、% を使用すると body width を設定しないとビジュアル領域の幅を正しく取得できないため、これは良い利点です。
ここでのビューポートとは、以下に示すように、ブラウザの表示領域を指します:
サンプル コード:
h1{font-size:8vw;}ビューの口の幅が 200mm の場合、上記のコードの h1 要素のフォント サイズは 16mm、つまり (8x200)/100 になります。
例は次のとおりです。
<html>
<style>
.p1{font-size:5vw;}
.p2{font-size:5px;}
</style>
</head>
<body>
<p class="p1">相对于viewport宽度大小的文字</p>
<p class="p2">px宽度大小的文字</p>
</body>
</html>出力結果:
css ビデオチュートリアル)
以上がCSSのvwとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。