CSSのvwとは何ですか-フロントエンドQ&A-php.cn

CSSのvwとは何ですか

WBOY

リリース： 2022-05-24 21:06:00

オリジナル

4906 人が閲覧しました

CSS では、vw はウィンドウ単位と相対単位であり、ウィンドウの幅のパーセンテージを意味します。vw はウィンドウの幅に対する相対単位であり、ウィンドウはクライアントの表示領域です。ウィンドウは 100 単位に分割され、1vw のサイズはウィンドウの幅の 1 パーセントになります。

CSSのvwとは何ですか

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css の vw とは

CSS 単位は、サイズ単位や色の単位を含む測定単位です。さまざまなビューで Web ページのレイアウトが混乱するのを避けるために、私たちは多くの場合、対面ユニットを使用します。

vw はビューポートの幅の略語で、1vw は常に現在のビューポートの幅の 1 パーセントに等しくなります。 vw はウィンドウ単位であり、相対単位です。ビューポートは、幅に応じて vw の 100 単位に分割されます。

vw の利点は幅を直接取得できることですが、% を使用すると body width を設定しないとビジュアル領域の幅を正しく取得できないため、これは良い利点です。

ここでのビューポートとは、以下に示すように、ブラウザの表示領域を指します:

CSSのvwとは何ですか

サンプルコード:

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のvwとは何ですか

(学習ビデオ共有:

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

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

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSSのvwとは何ですか

css の vw とは