CSSユニットの分類は何ですか?

CSS 単位分類には、絶対単位と相対単位が含まれます。詳細な紹介: 1. 絶対単位は、物理的寸法に関連する単位であり、その値は、ピクセル、インチ、センチメートル、ミリメートル、ポイントなど、さまざまなデバイスや環境で固定されます; 2. 相対単位は、他のサイズやサイズと比較した単位です。相対単位は、応答性の高いレイアウトを実装し、パーセンテージ、ウィンドウ単位、フォント相対単位、相対長さ単位など、さまざまな画面サイズのニーズに適応できます。適切なユニットを選択すると、正確な制御とさまざまな画面サイズへの適応が可能になります。

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

CSS のユニットは、その特性と用途に応じて分類できます。一般的な分類方法によれば、CSS 単位は次のカテゴリに分類できます:

1. 絶対単位: 絶対単位は物理的寸法に関連する単位であり、その値はさまざまなデバイスや環境にわたって維持されます。 。一般的な絶対単位は次のとおりです。

- ピクセル (ピクセル、px): ピクセルは最も一般的に使用される絶対単位であり、画面上の点を表します。ピクセルは固定されており、画面サイズに基づいて変化しません。 CSS では、ピクセルは要素のサイズ、間隔、境界線などの属性を指定するためによく使用されます。

- インチ (インチ、インチ): インチは物理単位であり、1 インチが 2.54 センチメートルに等しいことを示します。 CSS では、サイズの単位としてインチを使用して要素のサイズを指定できます。

- センチメートル (cm): センチメートルは物理単位であり、1 センチメートルが 0.3937 インチに等しいことを示します。 CSS では、サイズの単位としてセンチメートルを使用して要素のサイズを指定できます。

- ミリメートル (mm): ミリメートルは物理単位であり、1 ミリメートルが 0.03937 インチに等しいことを示します。 CSS では、サイズの単位としてミリメートルを使用して要素のサイズを指定できます。

- ポイント (ポイント、pt): ポイントは物理単位であり、1 ポイントが 1/72 インチに等しいことを示します。 CSS では、サイズの単位としてポイントを使用して要素のサイズを指定できます。

2. 相対単位: 相対単位は、他の次元または環境に対する相対的な単位であり、その値はコンテキストの変化に応じて変化します。相対単位により、応答性の高いレイアウトが可能になり、さまざまな画面サイズに適応します。一般的な相対単位は次のとおりです。

- パーセンテージ (%): パーセンテージは、親要素に対する相対的な測定単位です。 CSS では、パーセンテージを使用して、要素のサイズ、マージン、パディング、その他のプロパティを指定できます。たとえば、width: 50%; は、要素の幅が親要素の幅の 50% であることを意味します。

- ビューポート単位: ビューポート単位は、ブラウザーのビューポートを基準とした測定単位です。ビューポート ユニットは、ブラウザ ウィンドウのサイズに基づいて要素のサイズを変更します。一般的なウィンドウ単位は次のとおりです。

- ビューポート幅 (vw): ウィンドウ幅の単位は、ブラウザ ウィンドウの幅に対する相対的なパーセンテージを表します。たとえば、width: 50vw; は、要素の幅がブラウザ ウィンドウの幅の 50% であることを意味します。

- ビューポートの高さ (vh): ウィンドウの高さの単位は、ブラウザ ウィンドウの高さに対する相対的なパーセンテージを表します。たとえば、height: 50vh; は、要素の高さがブラウザ ウィンドウの高さの 50% であることを意味します。

- ビューポートの最小幅 (vmin): ビューポートの最小幅の単位は、ブラウザ ウィンドウの幅と高さの小さい方に対する割合を表します。たとえば、 width: 50vmin; は、要素の幅がブラウザ ウィンドウの幅と高さの小さい方の 50% であることを意味します。

- ビューポートの最大幅 (vmax): ビューポートの最大幅の単位は、ブラウザ ウィンドウの幅と高さの大きい方に対する割合を表します。たとえば、 width: 50vmax; は、要素の幅がブラウザ ウィンドウの幅と高さの大きい方の 50% であることを意味します。

- フォント相対単位: フォント相対単位は、フォント サイズに対する相対単位です。一般的なフォントの相対単位は次のとおりです。

- em: em 単位は、要素に対するフォント サイズの倍数です。たとえば、 font-size: 1.2em; は、フォント サイズが親要素のフォント サイズの 1.2 倍であることを意味します。

- rem: rem 単位は、ルート要素 (つまり、html 要素) を基準としたフォント サイズの倍数です。たとえば、 font-size: 1.5rem; は、フォント サイズがルート要素のフォント サイズの 1.5 倍であることを意味します。

- ch: ch 単位は「0」文字の幅の倍数です。たとえば、width: 10ch; は、要素の幅が「0」文字の幅の 10 倍であることを意味します。

- 相対長さの単位: 相対長さの単位は、要素自体の特定の属性値に対する相対的な単位です。一般的な相対長さの単位は次のとおりです:

- rem: rem 単位は、ルート要素 (つまり、html 要素) を基準としたフォント サイズの倍数です。 CSS では、レム単位を使用して要素のサイズ、間隔、境界線、その他の属性を指定できます。 rem 単位は、ページ全体の相対的な寸法を実装するためによく使用されます。

- em: em 単位は、要素に対するフォント サイズの倍数です。 CSS では、em 単位を使用して要素のサイズ、間隔、境界線、その他の属性を指定できます。 em ユニットは、独自のフォント サイズに基づいて要素のサイズを調整できます。

これらのユニットの選択は、特定のニーズと設計要件によって異なります。絶対単位はサイズの正確な制御が必要な状況に適しており、相対単位は応答性の高いレイアウトとさまざまな画面サイズへの適応性が必要な状況に適しています。単位を選択するときは、さまざまなデバイスや画面間の違いを考慮して、ページの一貫性とさまざまなデバイスでの適応性を確保する必要があります。

要約すると、CSS 単位は、絶対単位 (ピクセル、インチ、センチメートル、ミリメートル、ポイント) と相対単位 (パーセンテージ、ウィンドウ単位、フォント相対単位) を含む、その特性と用途に従って分類できます。相対単位は相対長単位に細分することもできます。適切なユニットを選択すると、正確な制御とさまざまな画面サイズへの適応が可能になります。

以上がCSSユニットの分類は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。