CSSのvwとvhの違いは何ですか-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのvwとvhの違いは何ですか

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 10, 2021 pm 05:53 PM

css

CSS における vw と vh の違い: vw ユニットはウィンドウの幅に応じてサイズを自動的に変更できます。「1vw」はウィンドウ幅の「1%」で、vh ユニットは自動的に変更できます。ウィンドウの高さに応じたサイズ。「 1vh 」はウィンドウの高さの「1%」です。

CSSのvwとvhの違いは何ですか

このチュートリアルの動作環境: 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のvwとvhの違いは何ですか

(学習ビデオ共有: css ビデオチュートリアル)

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM

私は知っています、私は知っています：たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY＆＃039;知っているものはありませんでしたか？奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります＆

HTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AM

CSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1）タグを使用して、ローカルCSSファイルをリンクします。 2）複数のタグを追加することにより、複数のCSSファイルを実装できます。 3）外部CSSファイルは、そのような絶対URLリンクを使用します。 4）ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション：それらを作成するのは難しいですか？May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1）

@KeyFrames CSS：最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude：1）defingsmoothtransitionsbetweenstates、2）AnimatingMultipleProperiessimally、3）3）bendorprefixesforbrows -compativity、4）組み合わせwithjavasfo

See all articles