CSS3でレイアウトにウィンドウ単位を使用する方法

ビューポート ユニットは数年前から存在していますが、あまり使用されていません。これらは現在、すべての主要なブラウザーでサポートされており、特定の状況、特にレスポンシブ デザインに関係する状況で役立つ独自の機能を提供します。この記事では、CSS3 の知識をより深く学ぶために、CSS3 のレイアウトにウィンドウ単位を使用する方法を主に説明します。

<script>ec(2);</script>

ビューポートユニットの紹介

ビューポートは、ブラウザが実際にコンテンツを表示する領域です。つまり、ツールバーやボタンのない Web ブラウザです。これらの単位は、vw、vh、vmin、および vmax です。これらはすべて、ブラウザ (ビューポート) サイズとウィンドウのサイズ変更によって生じるスケールの変化の比率を表します。

たとえば、1000px (幅) と 800px (高さ) のビューポートがあります

vw - ビューポート (Viewport) の幅が 1% であることを表し、この例では 50vw = 500px です。
vh—ウィンドウの高さの割合 50vh = 400px。
vmin—vmin の値は、現在の vw と vh の小さい方の値です。この例では、ランドスケープモードなので、50vim = 400pxです。
vmax - 大きいサイズの割合。 50vmax = 500ピクセル。

幅、高さ、マージン、フォントサイズなど、ピクセル値が使用できる場所であればどこでも使用できます。ウィンドウのサイズを変更したり、デバイスのブラウザを回転させたりすることで、これらの値が再計算されます。

ページの高さ全体を占めます

すべてのフロントエンド開発者がこれに取り組んでいます。あなたの最初の本能はこれを行うことです:

#elem{
height: 100%;
}

ただし、html と body に 100% の高さを追加しない限り、このコードはエレガントではないため、依然として機能しません。残りのデザインが台無しになる可能性が高くなります。 vh を使用すると非常に簡単になります。高さを 100vh に設定するだけで、それが常にウィンドウの高さになります。

#elem{
height: 100vh;
}

これは主人公にぴったりのフルスクリーン画像のようで、非常にスタイリッシュに見えます。

子要素のサイズは、親要素ではなくブラウザを基準にして変更されます

場合によっては、子要素のサイズが親要素ではなくウィンドウを基準にして変更されることが必要です。同様に、前の例によれば、これは機能しません:

#parent{
width: 400px;
}
#child{
/* これは、ページ全体ではなく、親の幅の 100% に等しくなります。 */
width: 100%;
}

vw を使用して子要素を設定すると、単純にオーバーフローして Web ページの全幅を占有します:

#parent{
width: 400px;
}
#child {
/ * これは、親のサイズに関係なく、ページの 100% に相当します */
width: 100vw;
}


レスポンシブ フォント サイズ

ビューポート単位はテキストでも使用できます。この例では、vm を使用してフォント サイズを設定し、CSS 応答性の優れたテキスト行を作成します。さようなら、フィットテキスト！

応答性の高い垂直方向のセンタリング

要素のビューポート単位の幅、高さ、マージンを設定することで、他のトリックを使用せずにセンタリングを設定できます。

ここでは、高さが 60vh、上下のマージンが 20vh の長方形です。その合計は 100vh (60 2*20) で、ウィンドウのサイズが変更されても常に中央に配置されます。

#rectangle{
width: 60vw;
height: 60vh;
margin: 20vh auto;
}


等幅列

ビューポート ユニットを使用して、応答性の高いグリッドを設定できます。これらはパーセンテージのように動作しますが、常にビューポートのサイズに相対的です。したがって、ウィンドウよりも広い親要素の中にそれらを配置することもできますが、それでも必要な幅を維持するためのグリッドが存在することになります。これにより、全画面スライダーを簡単に作成できます。

この手法では、隣接する要素を揃えるために要素を float:left で揃える必要があります:

.column-2{
float: left;
width: 50vw;
}
.column-4{
float: left;
width : 25vw;
}
.column-8{
float: left;
width: 12.5vw;
}


関連推奨事項:

View-based typesetting_html/css_WEB-ITnose

TeachあなたはCSS 5分でわかるグリッドレイアウト

CSSレイアウトのスキルとは

以上がCSS3でレイアウトにウィンドウ単位を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。