CSS ビューポート ユニット vh および vmax を使用してアダプティブ グリッド レイアウトを実装する方法

CSS ビューポート ユニット vh および vmax を使用してアダプティブ グリッド レイアウトを実装する方法

最新の Web デザインでは、アダプティブ レイアウトは重要な部分です。これにより、さまざまな画面サイズやデバイス上で Web ページの読みやすさとユーザー エクスペリエンスが向上します。 CSS ビューポート ユニットは、アダプティブ レイアウトを実装するための強力なツールです。その中で、vh と vmax は一般的に使用される 2 つのビューポート ユニットであり、Web デザインでアダプティブ グリッド レイアウトを実装するのに役立ちます。

vh はビューポートの高さのパーセント単位で、1vh はビューポートの高さの 100 分の 1 に相当します。 vmax はビューポートの幅と高さの大きい方のパーセント単位で、1vmax はビューポートの幅と高さの大きい方の 100 分の 1 に相当します。どちらのユニットも非常に柔軟で、アダプティブ レイアウトでの適応性が高くなります。

以下では、vh および vmax ユニットを使用してアダプティブ グリッド レイアウトを作成する方法を検討します。

まず、基本的なグリッド コンテナーを設定する必要があります。 HTML では、div 要素をコンテナとして使用し、「grid-container」などのクラス名を設定できます。次に、CSS でこのクラス名にスタイルを追加して、グリッド レイアウトを作成できます。

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; } .grid-item { background-color: #eee; }

上記のコードでは、CSS グリッド (グリッド レイアウト) を使用して 3 つの列を持つグリッド コンテナーを作成します。このコンテナーでは、子要素は ".grid-item" クラス名要素を持つ div です。

次に、vh ユニットと vmax ユニットを使用して、このグリッド レイアウトを適応型にします。

まず、グリッド コンテナーの高さを設定しましょう。 vh 単位を使用して、コンテナの高さがビューポートの高さのパーセンテージであることを指定できます。

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; height: 70vh; }

上記のコードでは、コンテナの高さをビューポートの高さの 70% に設定します。このようにして、コンテナの高さはさまざまな画面サイズに合わせて自動的に調整されます。

次に、子要素の高さを設定することで、グリッド レイアウトの各セルの高さを適応させることができます。

.grid-item { background-color: #eee; height: 100%; }

上記のコードでは、子要素の高さを 100% に設定しているため、各セルの高さはコンテナの高さに応じて自動的に調整されます。

さらに、vmax ユニットを使用して、異なるアスペクト比の画面上でグリッド レイアウトを読み取れるようにすることもできます。たとえば、グリッド レイアウトの各セルの幅をコンテナの高さの大きい値と等しくしたい場合は、次のように設定できます。

.grid-item { background-color: #eee; height: 100%; width: 100vmax; }

上記のコードでは、次のように設定します。子要素の幅を 100vmax に設定すると、各セルの幅がビューポートの幅とビューポートの高さの大きい方に自動的に調整されます。

vh および vmax ユニットを使用すると、適応グリッド レイアウトを簡単に実装できます。これは、読みやすさとユーザー エクスペリエンスに優れた Web デザインを作成するのに非常に役立ちます。この記事のサンプル コードが、ビューポート ユニットを使用して Web デザインでアダプティブ グリッド レイアウトを実装するきっかけになれば幸いです。

以上がCSS ビューポート ユニット vh および vmax を使用してアダプティブ グリッド レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。