ホームページ > 記事 > ウェブフロントエンド > CSSのvwとvhの違いは何ですか
CSSのvwとvhの違いは何ですか
- WBOYオリジナル
- 2021-12-10 17:53:5716961ブラウズ
CSS における vw と vh の違い: vw ユニットはウィンドウの幅に応じてサイズを自動的に変更できます。「1vw」はウィンドウ幅の「1%」で、vh ユニットは自動的に変更できます。ウィンドウの高さに応じたサイズ。「 1vh 」はウィンドウの高さの「1%」です。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
#css における vw と vh の違いは何ですか。
css における vw と vh の違いは次のとおりです。
vw ユニットはウィンドウの幅に応じてサイズを自動的に変更できます。1vw はウィンドウ幅の 1% です。
vh ユニットは自動的にサイズを変更できます。ウィンドウの高さに応じてサイズを変更します、1vh はウィンドウの高さの 1% です;
vw は px、rem などと同様の CSS の属性であり、以下に属します長さの単位にします。ブラウザでは、1 vw = ビューポートの幅/100
この機能によると、vw はモバイル アダプティブ レイアウトの実装に役立ちます。その利点は、表示されているものがそのまま得られるということであり、rem よりも優れています。まったく使用されていないため、追加の計算を使用してください。
変数や関数を定義できるため、sass などの CSS 前処理言語と組み合わせて使用することをお勧めします。これは、vw を使用する際に非常に役立ちます。
vm、vh、vmin、vmax はウィンドウ単位および相対単位です。これは、ページの親ノードまたはルート ノードに対して相対的なものではありません。ビューポートのサイズによって決まり、単位は 1、つまり 1% 程度を意味します。ビューポートは、実際にコンテンツを表示するブラウザの領域です。つまり、ツールバーやボタンのない Web ブラウザです。
具体的な説明は次のとおりです。
vw: ウィンドウの幅の割合 (1vw はウィンドウの幅が 1% であることを意味します)
vh: ウィンドウの幅の割合ウィンドウの高さ
vmin: 現在の Vw と Vh の小さい方の値を取得します。
vmax: 現在の Vw と Vh の大きい方の値を取得します
高さの合計ビューポートの幅を基準とした vh と vw の関係。1vh はビューポートの高さの 1/100 に等しく、1vw はビューポートの幅の 1/100 に等しい。例: ブラウザの高さは 900 ピクセル、幅は 750 ピクセル、1 vh = 900 ピクセル/100 = 9 px、1vw = 750px/100 = 7.5 px 、画面と同じ高さのボックスを実現するのは簡単です。
例は次のとおりです:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>vh_CSS参考手册_web前端开发参考手册系列</title>
<style>
.p1{font-size:5vh;}
.p2{font-size:5vw;}
</style>
</head>
<body>
<p class="p1">相对于viewport高度大小的文字</p>
<p class="p2">相对于viewport宽度大小的文字</p>
</body>
</html>出力結果:
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSのvwとvhの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。