CSS ビューポートユニット vw および vh を使用して、タブレットやモバイルの画面に適応するレイアウトを実装する方法-CSSチュートリアル-php.cn

CSS ビューポートユニット vw および vh を使用して、タブレットやモバイルの画面に適応するレイアウトを実装する方法

PHPz

リリース： 2023-09-13 12:26:00

オリジナル

1375 人が閲覧しました

如何使用 CSS Viewport 单位 vw 和 vh 来实现适应平板和手机屏幕的布局

CSS ビューポートユニット vw および vh を使用して、タブレットや携帯電話の画面に合わせたレイアウトを実装する方法

レスポンシブ Web レイアウトを設計する場合、さまざまなデバイスを考慮する必要があることがよくあります。スクリーンのサイズ適応の問題。 CSS ビューポート単位の vw (ビューポートの幅) と vh (ビューポートの高さ) は、タブレットやモバイルの画面にレイアウトを適応させる簡単な方法を提供します。

ビューポート単位 vw と vh は、ビューポートの幅と高さを基準にして計算されます。1vw はビューポートの幅の 1% に等しく、1vh はビューポートの高さの 1% に等しくなります。これらの単位を適切に使用することで、さまざまなビューポートサイズで要素のサイズと位置を簡単に制御できます。

CSS ビューポートユニット vw と vh を使用して、タブレットや携帯電話の画面に合わせたレイアウトを実装する方法を詳しく紹介します。

基本スタイルの設定

レイアウトを開始する前に、ページのデフォルトスタイルがさまざまなデバイス画面に適応するように、いくつかの基本スタイルを設定する必要があります。まず、次のスタイルを body 要素に追加できます:

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ログイン後にコピー

これにより、デフォルトのマージンとパディングが削除され、ボックスモデルがボーダーボックスモデルに設定されます。

vw 単位と vh 単位を使用して要素サイズを設定する

レイアウトを設計するときは、さまざまなビューウィンドウサイズでのページ要素のサイズ変化を考慮する必要があります。。このとき、vw および vh 単位を使用して要素のサイズを設定できます。

.element {
  width: 50vw; /* 宽度为视窗宽度的 50% */
  height: 30vh; /* 高度为视窗高度的 30% */
}

ログイン後にコピー

幅と高さを相対的な単位値に設定することで、要素がさまざまなビューポートサイズにわたって適切な比率を維持できるようになります。

vw および vh 単位を使用して要素の位置を設定する

要素のサイズを設定することに加えて、ページ上の要素の位置も考慮する必要があります。このとき、vw および vh 単位を使用して要素の位置を設定できます。

.element {
  position: absolute;
  left: 50vw; /* 左边距为视窗宽度的 50% */
  top: 25vh; /* 上边距为视窗高度的 25% */
}

ログイン後にコピー

left プロパティと top プロパティを相対単位値に設定することで、ビューポートサイズが異なっても要素の相対位置が変わらないことを保証できます。

メディアクエリを使用してレイアウトを調整する

メディアクエリを使用すると、さまざまなデバイスの画面サイズに応じてさまざまなスタイルやレイアウトを適用できます。

たとえば、画面の幅が 768 ピクセル未満の場合、要素のサイズと位置を調整できます。

@media (max-width: 768px) {
  .element {
    width: 80vw;
    height: 25vh;
    left: 10vw;
    top: 15vh;
  }
}

ログイン後にコピー

このように、画面の幅が 768 ピクセル未満の場合、 .element 要素のサイズと位置はメディアに従います。クエリ内のスタイルは調整されます。

要約すると、CSS ビューポートユニット vw および vh を使用することで、タブレットやモバイル画面へのレイアウトの適応性を簡単に実現できます。要素のサイズと位置を相対的な単位値に設定し、メディアクエリを組み合わせてさまざまなデバイスの画面サイズに適応させることで、Web ページがさまざまなデバイス上で最高のユーザーエクスペリエンスを確実に提供できるようになります。

サンプルコード:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .element {
      width: 50vw;
      height: 30vh;
      position: absolute;
      left: 50vw;
      top: 25vh;
      background-color: red;
    }
    
    @media (max-width: 768px) {
      .element {
        width: 80vw;
        height: 25vh;
        left: 10vw;
        top: 15vh;
      }
    }
  </style>
</head>
<body>
  <div class="element"></div>
</body>
</html>

ログイン後にコピー

上記は、CSSビューポートユニットvwとvhを使用して、タブレットや携帯電話の画面に合わせたレイアウトを実装する方法とサンプルコードです。レイアウト調整作業のお役に立てれば幸いです。

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