CSSの相対単位とは何ですか

CSS には多数の相対単位があり、一般的な単位はピクセル (px)、パーセンテージ (%)、em (em)、および rem (rem) です。これら 4 つの相対単位を以下に紹介し、具体的なコード例を示します。

1. ピクセル (px):
   ピクセルは画面解像度に関連する単位であり、その値は固定されており、ユーザーの設定に従って変更されません。たとえば、要素の幅を 100 ピクセルに設定した場合、その幅は 100 ピクセルのままになります。

コード例:

div {
  width: 100px;
  height: 50px;
}

2. パーセント (%):
   パーセントは親要素に対する相対的な単位であり、その値は親要素のサイズに応じて変化します。親要素 。つまり、パーセント単位により、画面サイズの変化に応じて要素のサイズを自動的に調整できます。たとえば、親要素の幅が 200px で、子要素の幅を 50% に設定した場合、子要素は親要素の幅の半分を占めます。

コード例:

.parent {
  width: 200px;
}

.child {
  width: 50%;
  height: 50px;
}

3. em (em):
   em は、要素自体のフォント サイズに相対的な単位です。たとえば、要素のフォント サイズが 16 ピクセルの場合、1em は 16 ピクセル、2em は 32 ピクセルなどとなります。 emユニットではフォントサイズの相対的な調整を簡単に実現できます。

コード例:

p {
  font-size: 16px;
}

span {
  font-size: 1.5em; /* 相当于24px */
}

4. rem (rem):
   rem は em に似ていますが、ルート要素 (通常は を指します) に相対的なフォントです。 html要素）のサイズ。レム単位はフォントサイズをページ全体で均一に制御するとともに、相対的な調整も可能とします。

コード例:

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 相当于24px */
}

概要:
CSS の相対単位は、ピクセル (px)、パーセンテージ (%)、em (em)、および rem (rem) です。 。ピクセル単位は固定されており、ユーザー設定に基づいて変更されません。パーセント単位は、親要素のサイズに応じて変化します。 Em 単位は要素自体のフォント サイズを基準とした単位であり、rem 単位はルート要素のフォント サイズを基準とした単位です。実際のアプリケーションでは、必要に応じて要素のサイズとフォント サイズを制御するために適切な相対単位を選択できます。

以上がCSSの相対単位とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。