CSS ビューポート: vh と vmax を使用して適応的な画面の高さを作成する方法

CSS ビューポート: vh と vmax を使用してアダプティブな画面の高さを作成する方法

現代の Web デザインでは、アダプティブ レイアウトが不可欠なテクノロジーになっています。デバイスによって画面サイズと解像度が異なるため、さまざまなデバイスでページを適切に表示する方法が課題となります。

CSS では、ビューポートは Web ページのレイアウトと表示を制御するために使用される重要な要素です。ビューポートは、Web ページの幅、高さ、ズーム率、およびその他の関連プロパティを定義する Web ページ ビューのウィンドウとみなすことができます。この記事では、ビューポートの vh ユニットと vmax ユニットを使用して、適応型画面高さを実装する方法を紹介します。

vh (ビューポートの高さ) は、ビューポートの高さのパーセント単位であり、ビューポートの高さに対する特定の比率を表します。たとえば、要素の高さが 50vh に設定されている場合、その高さはビューポートの高さの 50% を占めます。

vmax はビューポートの最大サイズ値を表し、vh と vw (ビューポート幅) の大きい方です。つまり、vmax はビューポートの幅と高さの大きい方に基づいてその値を決定できます。

次に、サンプル コードを使用して、vh と vmax を使用して適応型画面の高さを作成する方法を示します。

まず、HTML ヘッダーの <meta> タグに次のコードを追加して、ブラウザにビューポートを設定するように指示する必要があります。 CSS スタイル シートでは、次のように vh および vmax 単位を使用できます。

<meta name="viewport" content="width=device-width, initial-scale=1">

上記のコード例では、高さ 100vh のコンテナ (.container) を作成し、その中で中央に配置します。テキスト）が表示されます。コンテナーは、

display: flex

属性を使用して、垂直方向と水平方向の中央揃えを実現します。さらに、テキストのフォント サイズは 4vmax に設定されており、ビューポートの高さと幅の大きい方に合わせて動的に調整されます。 上記の CSS コードを通じて、画面の高さに適応するレイアウトを実装できます。このレイアウトは、デバイスの画面サイズに応じて、さまざまなデバイスで適切に表示されます。

要約すると、vh および vmax 単位を使用すると、画面の高さに適応するレイアウトを作成するのに役立ちます。要素の高さを vh 単位に設定することで、要素がビューポートの高さの一部を占めるようにすることができます。 vmax 単位を使用すると、ビューポートの幅と高さの大きい方に基づいて要素のサイズを動的に変更できます。

この記事の概要とサンプル コードを通じて、vh ユニットと vmax ユニットをよりよく理解して使用できるようになり、より適切な Web ページ レイアウトを実現できることを願っています。実際のプロジェクト開発では、特定のニーズやデザイン要件に応じて vh、vmax、その他の CSS 属性を組み合わせて、より柔軟で美しい Web ページ レイアウトを作成できます。

以上がCSS ビューポート: vh と vmax を使用して適応的な画面の高さを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。