CSS 単位 – %、em、rem、px、vh、vw

CSS またはカスケード スタイル シートには、ニーズに応じてさまざまな方法でさまざまなプロパティの値を表すことができる多くの単位があります。 font-size、height、width、line-height などの CSS プロパティは、コンテナのさまざまなプロパティを定義するために使用されます。これらのプロパティの値は、さまざまな単位で割り当てることができます。

この記事では、さまざまな CSS ユニットを詳しく見て、実際に実装して各ユニットの使用法を理解します。

CSS では利用可能な CSS ユニットが多数ありますが、この記事では次のプロパティのみを学習または説明します -

• ピクセル (px) - ピクセルまたはピクセル単位は最小であり、主に初心者がさまざまな長さのプロパティの値を設定するために使用します。数学的には、1px は 1/96 インチ、つまり 1px = 1/96 インチとして定義されます。

＃＃＃文法＃＃＃

次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -

リーリー

• em

  - em 属性は、要素のフォント サイズに相対的な長さ属性値を設定するために使用されます。 em をピクセルと比較すると、1em は 16px と同じであることがわかります。つまり、1em = 16px です。

  ＃＃＃文法＃＃＃
次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -

リーリー

rem

- rem 属性は、HTML のルート要素 (つまり、
• タグ) のフォント サイズに相対的な属性値を設定します。 rem をピクセルと比較すると、1rem も 16px と同じであることがわかります (つまり、1rem = 16px)。

  ＃＃＃文法＃＃＃ 次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -

  リーリー

注意

- Web ページやアプリケーションを開発するときは、ピクセル、em、rem を単位として使用しないことをお勧めします。これは、Web ページをレスポンシブにしながら、HTML 内のコンテナーがビューポートのサイズに基づいて幅と高さを動的に変更することを許可しないためです。

Viewport-width (vw) - viewport-width または vw 属性は、Web ページを表示しているユーザーの現在のビューポート幅に基づいて値を設定するために使用されます。これにより、Web ページの現在のビューポートの幅に基づいて、コンテナーがその幅を動的に変更できるようになります。

• ＃＃＃文法＃＃＃

  次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します - リーリー

ビューポートの高さ (vh)

- ビューポートの高さ (vh) は、ビューポートの幅プロパティとほぼ同じです。 vw は要素の動的幅を設定するために使用され、vh は要素の動的高さを設定するために使用されます。ユーザーが高さを変更するたびに、現在のビューポートの高さを基準にして要素の高さが動的に設定されます。

＃＃＃文法＃＃＃

次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -
• リーリー
  パーセント (%)
- パーセント属性または % 属性は、HTML ドキュメント内の要素に割り当てる属性に動的な値も設定します。 vw や vh などのプロパティごとに異なる % 記号を使用する代わりに、各プロパティに同じ % 記号を使用して値を割り当てることができます。

＃＃＃文法＃＃＃

次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -

リーリー

ここで、それぞれについて説明し、コード例を使用して実際に実装することで、その違いを理解しましょう。
• ＃＃＃ステップ＃＃＃
  ステップ 1
- 最初のステップでは、さまざまな CSS ユニットを使用してさまざまな長さのプロパティを設定するさまざまな HTML 要素を定義します。

ステップ 2

- 次のステップでは、前のステップで定義した要素のスタイルを

要素内で定義します。 /head> タグ。

• ステップ 3

  - 最後のステップでは、さまざまな CSS ユニットを使用してプロパティに値を割り当て、それらの違いを確認します。

• ＃＃＃例＃＃＃ 以下の例は、すべての CSS ユニットの違いを理解し、実際に理解するのに役立ちます - リーリー

  上の例では、要素の高さ、幅、フォント サイズを指定するためにさまざまな CSS 単位を使用しました。 ＃＃＃＃＃＃結論は＃＃＃ この記事では、CSS で length プロパティの値を設定するために使用できるさまざまな CSS 単位について学びました。コード例を使用して実際に実装することで、それらについて詳しく説明します。

以上がCSS 単位 – %、em、rem、px、vh、vwの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。