さまざまな種類の CSS 相対単位

CSS には多くの種類の相対単位があり、それぞれに適用可能なシナリオと特性があります。一般的に使用される相対単位を以下に紹介し、いくつかの具体的なコード例を示します。

1. em
   em は、現在の要素のフォント サイズに応じて計算される単位です。たとえば、要素のフォント サイズが 16 ピクセルの場合、1em は 16 ピクセルに相当します。要素のフォント サイズが 2em の場合、そのフォント サイズは親要素のフォント サイズの 2 倍になります。

p {
  font-size: 16px;
}

span {
  font-size: 0.5em; /* 相当于8px */
}

2. rem
   rem は、ルート要素 (つまり、html 要素) のフォント サイズ サイズを基準にして計算される単位です。 em と同様の方法で使用されますが、親要素の影響を受けません。

html {
  font-size: 16px;
}

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

3. vw/vh
   vw と vh は、ウィンドウの幅とウィンドウの高さに対する相対的な単位です。 1vw はウィンドウ幅の 1% に相当し、1vh はウィンドウ高さの 1% に相当します。この単位は、ビューポートのサイズに基づいて要素のサイズを自動的に変更するために、レスポンシブ デザインでよく使用されます。

div {
  width: 50vw; /* 相当于视窗宽度的50% */
  height: 30vh; /* 相当于视窗高度的30% */
}

4. %
   パーセント単位は、親要素のサイズを基準にして計算されます。たとえば、要素の幅が 50% の場合、その幅は親要素の幅の半分になります。

.container {
  width: 200px;
}

div {
  width: 50%; /* 相当于100px */
}

5. ch
   ch は、現在のフォントの幅を基準にして計算された単位です。 ch は、現在のフォントの文字「0」の幅に等しくなります。

p {
  font-size: 16px;
}

span {
  width: 10ch; /* 相当于160px */
}

概要:
相対単位は、CSS でより柔軟で適応性のあるレイアウト方法を提供します。必要に応じて適切な単位を選択してください 要素の特性や設計ニーズに基づいて、適切な相対単位を選択できます。相対単位を合理的に使用することで、適応型レイアウト効果を実現できます。

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