CSS ビューポート ユニット vh および vw を使用して、レイアウトをさまざまな画面の高さに適応させる方法

CSS ビューポート ユニット vh および vw を使用して、さまざまな画面の高さに適応するレイアウトを実装する方法

モバイル デバイスの普及に伴い、多くの Web サイトやアプリケーションはそれに適応する必要があります。さまざまな画面の高さを適切に表示できます。 CSS はさまざまな単位を提供します。そのうちの vh (ビューポートの高さ) 単位と vw (ビューポートの幅) 単位は、レイアウトをさまざまな画面の高さに適応させるのに最適です。この記事では、これら 2 つのユニットの使用方法について詳しく説明し、具体的なコード例を示します。

まず、これら 2 つの単位がどのように機能するかを理解しましょう:

• vh (ビューポートの高さ): この単位はビューポートの高さのパーセンテージを表します。 1vh はビューポートの高さの 1% に相当します。
• vw (ビューポート幅): この単位はビューポート幅のパーセンテージを表します。 1vw はビューポート幅の 1% に相当します。

次に、これら 2 つのユニットを使用して、さまざまな画面の高さに適応するレイアウトを実装します。

1. vh 単位を使用して要素の高さを設定する:
   vh 単位を使用して要素の高さを設定すると、ビューポートの高さに基づいて要素のサイズが自動的に変更されます。たとえば、div 要素の高さを画面の高さの 50% に設定できます。

div {
  height: 50vh;
}

このようにして、div 要素が異なる高さの画面に配置されると、その高さはそれに応じて調整してください。

2. 垂直方向のセンタリングに vh 単位を使用する:
   vh 単位を使用して、要素の垂直方向のセンタリングを実現することもできます。この効果は、vh ユニットとフレックスボックス レイアウトを組み合わせて使用​​することで簡単に実現できます。たとえば、次のコードは要素を垂直方向の中央に配置します:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.element {
  width: 50%;
}

この例では、コンテナ要素がビューポート全体の高さ (100vh) を占めるように設定され、フレックスボックスを使用してその要素を垂直方向の中央に配置します。子要素。子要素の幅はビューポートの幅の 50% に設定されます。

3. vw 単位を使用してフォント サイズを設定する:
   vw 単位を使用するもう 1 つの実用的な方法は、フォント サイズを設定することです。フォント サイズをビューポート幅のパーセンテージとして設定することで、さまざまな画面間でフォントのサイズが一貫していることが保証されます。以下に例を示します。

h1 {
  font-size: 5vw;
}

ここでは、h1 要素のフォント サイズがビューポートの幅に応じて自動的に調整されます。画面が小さい場合はフォント サイズが小さくなり、画面が大きい場合はフォント サイズが大きくなります。

概要:
CSS ビューポート ユニット vh および vw を使用すると、さまざまな画面の高さに適応するレイアウトを簡単に実装できます。要素の高さ、フォント サイズを設定し、フレックスボックスなどのレイアウト技術を使用することにより、Web サイトとアプリがさまざまなデバイスで適切に表示されることを保証できます。これらのユニットの機能と柔軟性により、レスポンシブ デザインのための強力なツールになります。

この記事が、CSS ビューポート ユニット vh および vw を使用して、さまざまな画面の高さに適応するレイアウトを実装する方法を理解するのに役立つことを願っています。これらのユニットを使用すると、さまざまなデバイスで動作するユニークでエレガントな Web デザインを簡単に作成できます。

以上がCSS ビューポート ユニット vh および vw を使用して、レイアウトをさまざまな画面の高さに適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。