CSS ビューポート: レスポンシブ デザインで vh、vw、vmin、および vmax ユニットを使用する方法

CSS ビューポート: vh、vw、vmin、vmax ユニットを使用してレスポンシブ デザインを実現する方法。具体的なコード例が必要です。

現代のレスポンシブ Web デザインでは、Webページは多くの場合、優れたユーザー エクスペリエンスを提供するために、さまざまな画面サイズやデバイスに適応することが期待されます。 CSS Viewport ユニット (ビューポート ユニット) は、この目標を達成するのに役立つ重要なツールの 1 つです。この記事では、vh、vw、vmin、および vmax ユニットを使用してレスポンシブ デザインを実装する方法を説明し、具体的なコード例を示します。

まず、これらの新しいビューポート単位を見てみましょう:

1. vh (ビューポートの高さ): ビューポートの高さに対するパーセント単位を表します。たとえば、1vh はビューポートの高さの 1% に相当します。
2. vw (ビューポート幅): ビューポート幅に対するパーセント単位を表します。たとえば、1vw はビューポート幅の 1% に相当します。
3. vmin (ビューポートの最小値): ビューポートの幅とビューポートの高さの小さい方に対するパーセント単位を表します。たとえば、1vmin は、ビューポートの幅またはビューポートの高さの小さい方の 1% に等しくなります。
4. vmax (ビューポート最大値): ビューポートの幅とビューポートの高さの大きい方に対するパーセント単位を表します。たとえば、1vmax は、ビューポートの幅またはビューポートの高さの大きい方の 1% に等しくなります。

次に、簡単な例を使用して、これらのユニットを使用してレスポンシブ デザインを実装する方法を説明します。

トップ ナビゲーション バーとコンテンツ領域を含む Web ページ レイアウトがあるとします。ナビゲーション バーの高さは常に 30 ピクセルであり、コンテンツ領域の高さは残りのスペースを埋めるように適応する必要があります。

最初に、ナビゲーション バーのスタイルを設定する必要があります:

.navbar {
  height: 30px;
}

次に、vh 単位を使用してコンテンツ領域の高さを設定できます。コンテンツ領域の高さがビューポートの高さの 80% を占めるようにしたいとします。

.content {
  height: 80vh;
}

この方法では、ビューポートの実際の高さに関係なく、コンテンツ領域は高さの 80% で埋められます。 。

高さの設定に加えて、vw 単位を使用して幅を設定することもできます。コンテンツ領域の幅がビューポートの幅の 50% を占めるようにしたいとします。

.content {
  width: 50vw;
}

同様に、vmin 単位と vmax 単位を使用して、ビューポートの高さとビューポートの小さい値と大きい値を設定できます。幅。たとえば、要素の幅と高さを常に等しくしたい場合は、vmin 単位を使用できます:

.square {
  width: 50vmin;
  height: 50vmin;
}

このようにして、要素の幅と高さは実際の値に関係なく同じままになります。ビューポートの幅と高さ。

最後に、要素の幅または高さを常にビューポート サイズの最大値と相対的にしたい場合は、vmax 単位を使用できます。たとえば、ボタンの幅と高さがビューポート サイズの 30% を超えないようにする場合:

.button {
  width: 30vmax;
  height: 30vmax;
}

このように、ビューポートの実際の幅と高さに関係なく、ボタンの幅と高さはビューポート サイズの 30% を超えることはありません。

要約すると、vh、vw、vmin、および vmax ユニットを使用すると、より柔軟で応答性の高い Web ページ レイアウトを実現できます。要素の幅と高さを設定すると、ビューポートのサイズに基づいてレイアウトが自動的に調整され、最高のユーザー エクスペリエンスが提供されます。

この記事のコード例と紹介が、CSS ビューポート ユニットの理解と使用に役立つことを願っています。レスポンシブデザインの導入が成功することを祈っています。

以上がCSS ビューポート: レスポンシブ デザインで vh、vw、vmin、および vmax ユニットを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。