CSS ビューポート ユニット vh を使用してモバイル画面に適応する Web ページ レイアウトを作成する方法

CSS ビューポート ユニット vh を使用して携帯電話の画面に適応する Web ページ レイアウトを作成する方法

モバイル デバイスの人気と使用はますます普及しています。 、ますます多くの Web ページが携帯電話の画面に適応する必要があります。この問題を解決するために、CSS3 では新しい単位であるビューポート単位が導入されました。これには vh (ビューポートの高さ) が含まれます。この記事では、vh ユニットを使用してモバイル画面に適応する Web ページ レイアウトを作成する方法を検討し、具体的なコード例を示します。

1. ビューポート単位の紹介 vh
ビューポートとは、ブラウザ ウィンドウ内で Web ページがコンテンツを表示する領域を指します。vh 単位は、ビューポートの高さに基づく単位です。 vh の値はビューポートの高さに対する相対的なパーセンテージであり、1vh はビューポートの高さの 1% に相当します。たとえば、ビューポートの高さが 800 ピクセルの場合、1vh は 8 ピクセルに相当します。

2. 携帯電話の画面に合わせた Web ページのレイアウトを作成する
vh 本体を使用すると、携帯電話の画面に合わせた Web ページのレイアウトを簡単に作成することができますので、一般的なレイアウト方法をいくつか紹介します。

1. 全画面レイアウト
   全画面レイアウトとは、Web コンテンツが白い端を残さずに携帯電話の画面全体に表示されることを意味します。これは、html 要素と body 要素の高さを 100vh に設定することで実現できます。

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

2. 垂直中央レイアウト
   垂直中央レイアウトとは、コンテンツが画面の中央に垂直に表示されることを意味します。携帯電話の画面。親コンテナの高さを 100vh に設定し、フレックス レイアウトを使用することで、垂直方向のセンタリングを実現できます。

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

3. 上部固定レイアウト
   上部固定レイアウトとは、コンテンツが上部にあることを意味します。 Web ページはモバイル画面に固定されています。ページの上部はスクロール バーでスクロールしません。これは、コンテンツ領域の高さを 100vh に設定し、固定位置を使用することで実現できます。

.container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}

4. アダプティブ画像レイアウト
   Web ページ制作では、多くの場合、アダプティブな表示が必要になります。携帯電話の画面上の画像。 vh 単位を使用して、画像の高さと幅をビューポートの特定の比率に設定できます。たとえば、画像の高さを 50vh に、幅を 50vh に設定して、適応型画像レイアウトを実現します。

img {
  height: 50vh;
  width: 50vh;
}

3. まとめ
CSS ビューポート ユニット vh を使用すると、モバイル画面に適応した Web ページ レイアウトを簡単に作成できます。この記事では、全画面レイアウト、垂直中央レイアウト、上部固定レイアウト、アダプティブ画像レイアウトなど、いくつかの一般的なレイアウト方法を紹介し、具体的なコード例を示します。この記事が、読者がモバイル画面に適応し、Web ページのユーザー エクスペリエンスを向上させるのに役立つことを願っています。

以上がCSS ビューポート ユニット vh を使用してモバイル画面に適応する Web ページ レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。