CSS の測定単位とは何ですか?

CSS 測定単位は、要素のサイズ、間隔、境界線、その他の属性を指定するために使用され、絶対単位と相対単位に分けることができます。絶対単位には、ピクセル、インチ、センチメートル、ミリメートル、ポイントが含まれ、相対単位には、パーセンテージ、ウィンドウの幅、ウィンドウの高さ、ウィンドウの最小幅、ウィンドウの最大幅、およびフォントの相対単位が含まれます。適切な測定単位を選択すると、さまざまな単位の特性と互換性を考慮しながら、ページを適応性と応答性に優れたものにすることができます。

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

CSS には、要素のサイズ、間隔、境界線、その他の属性を指定するために使用されるさまざまな測定単位があります。これらの測定単位は、絶対単位と相対単位の 2 つのカテゴリに分類できます。

1. 絶対単位:

- ピクセル (ピクセル、px): ピクセルは最も一般的に使用される絶対単位であり、画面上の点を表します。ピクセルは固定されており、画面サイズに基づいて変化しません。たとえば、width: 200px; は、要素の幅が 200 ピクセルであることを意味します。

- インチ (インチ、インチ): インチは物理単位であり、1 インチが 2.54 センチメートルに等しいことを示します。たとえば、width: 2in; は要素の幅が 2 インチであることを意味します。

- センチメートル (cm): センチメートルは物理単位であり、1 センチメートルが 0.3937 インチに等しいことを示します。たとえば、width: 5cm; は要素の幅が 5 cm であることを意味します。

- ミリメートル (mm): ミリメートルは物理単位であり、1 ミリメートルが 0.03937 インチに等しいことを示します。たとえば、width: 50mm; は要素の幅が 50 mm であることを意味します。

- ポイント (ポイント、pt): ポイントは物理単位であり、1 ポイントが 1/72 インチに等しいことを示します。たとえば、 font-size: 12pt; は、フォント サイズが 12 ポイントであることを意味します。

2. 相対単位:

- パーセンテージ (%): パーセンテージは、親要素に対する相対的な測定単位です。たとえば、width: 50%; は、要素の幅が親要素の幅の 50% であることを意味します。

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

- ビューポートの高さ (vh): ビューポートの高さは、ブラウザ ウィンドウの高さを基準とした測定単位です。たとえば、height: 50vh; は、要素の高さがブラウザ ウィンドウの高さの 50% であることを意味します。

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

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

- フォント相対単位: フォント関連の測定値を指定するために使用される、em、rem、ch などの相対単位が含まれます。 em は親要素に対する相対的なフォント サイズ、rem はルート要素 (つまり html 要素) に対する相対的なフォント サイズ、ch は 0 文字に対する相対的な幅です。

適切な測定単位を選択すると、さまざまなデバイスでページの表示に一貫性があり、応答性の高い機能を備えることができます。測定単位を選択するときは、実際のニーズと設計要件に基づいて、要素のサイズ、レイアウト、利用可能なスペースなどの要素を考慮する必要があります。同時に、さまざまなブラウザーやデバイス間でスタイルの一貫性と信頼性を確保するために、さまざまな測定単位の特性と互換性にも注意を払う必要があります。

要約すると、CSS は、絶対単位 (ピクセル、インチ、センチメートル、ミリメートル、ポイント) や相対単位 (パーセンテージ、ウィンドウ幅、ウィンドウ高さ、ウィンドウ最小幅、ウィンドウ最大幅) を含むさまざまな測定単位を提供します。 )、フォントの相対単位)。適切な測定単位を選択すると、さまざまな単位の特性と互換性を考慮しながら、ページを適応性と応答性に優れたものにすることができます。

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