CSS의 절대 단위와 상대 단위

CSS で要素をスタイル設定する場合、絶対単位 と 相対単位 の 2 つのカテゴリの単位から選択できます。それぞれの内訳と違いは次のとおりです。

---

1.絶対単位

絶対単位は固定の測定単位です。これらは他の要素や画面サイズの影響を受けません。つまり、使用されるコンテキストに関係なく、サイズは一定です。

一般的な絶対単位:

• px (ピクセル): ピクセルは画面上の小さな正方形です。固定レイアウトで最もよく使用される単位です。

  • 例:

  h1 {
    font-size: 24px;
  }
  

• pt (ポイント): 通常、印刷メディアで使用され、1pt は 1/72 インチに相当します。

• cm (センチメートル) および in (インチ): Web デザインではほとんど使用されず、これらの単位は物理的な寸法に基づいています。

絶対単位の利点:

• 一貫性: デバイスや画面のサイズに関係なく、サイズは常に同じです。
• 予測可能: すべてのプラットフォームでデザインをまったく同じにしたい場合に、固定レイアウトを作成するのに最適です。

欠点:

• 柔軟性の欠如: 絶対単位はさまざまな画面サイズやズーム設定にうまく適応せず、応答性が低下します。

---

2.相対単位

相対単位は柔軟で、使用されるコンテキストに基づいて拡大縮小されます。そのサイズは、親コンテナ、ビューポート、基本フォント サイズなどの他の要素によって異なります。

一般的な相対単位:

• em: 使用される要素のフォント サイズに相対します。親要素のフォントサイズが 16px の場合、1em は 16px に相当します。親要素のサイズが変更されると、親要素のサイズも変更されます。

  • 例:

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem (root em): ルート要素 (通常は 要素) のフォント サイズに相対します。これにより、em と比較して予測可能になります。

特に指定がない限り、ブラウザは通常、デフォルトでルート フォント サイズを 16 ピクセルに設定します。要素のカスタム フォント サイズを定義すると、すべての rem 値がその新しいサイズに基づいて計算されます。

• 例:
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • % (パーセント): 親要素のサイズに対する相対値。たとえば、width: 50% と指定すると、要素の幅がその親コン​​テナの 50% になります。

• 例:
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw (ビューポートの幅) および vh (ビューポートの高さ): これらの単位はブラウザのビューポートを基準としています。 1vw はビューポートの幅の 1%、1vh はビューポートの高さの 1% です。

• 例:
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

相対単位の利点:

• レスポンシブ デザイン: 相対単位は画面サイズ、フォント サイズ、コンテナーの寸法に基づいて自動的に拡大縮小され、デザインがより柔軟になります。
• メンテナンスが簡単: ルート要素のフォント サイズを変更すると (rem を使用)、デザイン全体を拡大縮小できます。

欠点:

• 制御が難しくなる可能性があります: 継承と、要素内でサイズがどのようにカスケードされるかをよく理解していないと、相対単位が予期しない結果を引き起こす可能性があります。

---

絶対単位と相対単位を使用する場合

• 絶対単位 (px など) は、正確な固定測定値が必要な場合に最適です。どこでも同じサイズにしたい場合にこれらを使用します (例: 小さなロゴやアイコン)。
• 相対単位 (em、rem、vw、% など) はレスポンシブ デザインに最適です。画面サイズや親要素に基づいて要素を拡大縮小したり適応させたりできるため、デザインがより柔軟になります。

---

例: 実際の絶対単位と相対単位

<style>
  .absolute {
    font-size: 24px; /* Absolute unit */
  }

  .relative {
    font-size: 1.5rem; /* Relative unit */
  }

  /* Root font size: 16px */
  html {
    font-size: 16px;
  }
</style>

<h1 id="This-is-px-text">This is 24px text</h1>
<h1 id="This-is-rem-text-px-based-on-root-size">This is 1.5rem text (24px based on root size)</h1>

この例では:

• 절대 글꼴 크기(24px)는 항상 동일하게 유지됩니다.
• 상대 글꼴 크기(1.5rem)는 루트 글꼴 크기(16px)에 따라 조정되어 24px가 됩니다.

---

결론:

• 기기 간 일관성이 필요한 경우 절대 단위를 사용하지만 반응하지 않는다는 점에 유의하세요.
• 상대 단위를 사용하면 특히 다양한 화면 크기와 기기용으로 개발할 때 더욱 유연하고 반응이 빠른 디자인을 얻을 수 있습니다.

위 내용은 CSS의 절대 단위와 상대 단위의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!