CSS 単位プロパティのガイド: em、rem、px および vw/vh

CSS 単位プロパティ ガイド: em、rem、px および vw/vh

CSS スタイルを記述するときは、適切な単位プロパティを選択することが非常に重要です。この記事では、一般的に使用されるいくつかの単位属性 (em、rem、px、vw/vh) を紹介し、具体的なコード例を示します。

1. em
   em (フォント サイズ単位) は、親要素のフォント サイズに対する相対的な単位です。親要素のフォント サイズが 16px の場合、1em は 16px に相当します。 em が他の属性 (幅、高さなど) に使用される場合、親要素のフォント サイズに比例した値でもあります。

コード例:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1em; /* 等同于16px */
  width: 2em; /* 等同于32px */
  height: 3em; /* 等同于48px */
}

2. rem
   rem (ルート要素のフォント サイズ単位) は、ルート要素 (通常は HTML) のフォント サイズに対する相対的な単位です。要素）。 em とは異なり、rem の Base はルート要素のフォント サイズです。ルート要素のフォント サイズが 16px の場合、1rem は 16px に相当します。 remはレイアウト部分に適しており、ページ全体の比率を簡単に調整できます。

コード例:

html {
  font-size: 16px;
}

.child {
  font-size: 1rem; /* 等同于16px */
  width: 2rem; /* 等同于32px */
  height: 3rem; /* 等同于48px */
}

3. px
   px (ピクセル単位) は最も一般的な単位であり、固定長です。 px は、サイズを正確に制御する必要がある状況に適しています。

コード例:

.child {
  font-size: 16px;
  width: 32px;
  height: 48px;
}

4. vw/vh
   vw (ビューポートの幅の単位) と vh (ビューポートの高さの単位) は、ビューポートの幅と単位に相対的です。ビューポートの高さの場合。ビューポートとは、ブラウザの表示領域の幅と高さを指します。 vw はビューポートの幅のパーセンテージを表し、vh はビューポートの高さのパーセンテージを表します。 vw/vh 単位を使用して、ブラウザ ウィンドウのサイズに基づいて要素のサイズを自動的に変更します。

コード例:

.child {
  font-size: 5vw; /* 视口宽度的5% */
  width: 30vw; /* 视口宽度的30% */
  height: 40vh; /* 视口高度的40% */
}

概要:
柔軟でさまざまな画面に適応できる CSS スタイルを作成するには、適切なユニット属性を選択することが非常に重要です。 em と rem は相対サイズに適しており、px は固定サイズに適しており、vw/vh は適応サイズに適しています。特定の状況に応じて適切なユニット属性を選択すると、さまざまなデバイスや画面上で Web ページをより適切に表示できるようになります。

上記は CSS ユニットのプロパティに関するガイドです。お役に立てれば幸いです。

以上がCSS 単位プロパティのガイド: em、rem、px および vw/vhの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。