フォントサイズに使用できるCSS長さユニットのウォークスルー

CSSフォントサイズユニットの詳細な説明：PX、EM、REM、％、VW/VHなど CSSは、さまざまな使用法と計算方法を備えたフォントサイズなどの属性の長さを指定するためのさまざまなユニットを提供します。この記事では、ピクセル（PX）、EMユニット（EM）、REMユニット（REM）、パーセンテージ（％）、ビューポートユニット（VW、VH、VMIN、VMAX）など、これらのユニットを詳細に調査し、分析します。 Webデザインの応答式。

ピクセル（px）

ピクセルは固定サイズのユニットで、通常は画面上の個々のドットを参照しています。ただし、デバイスのピクセル密度が異なるため、異なるデバイスに対するPXユニットの表示効果は一貫性がない場合があります。 CSSピクセルは、参照ピクセルによってサイズを計算して、この問題を回避します。参照ピクセルは、96dpiのピクセル密度を持つデバイス上の画面から読者が1つのアーム（約28インチ）離れている場合、単一のピクセルの視点として定義されます。これにより、1ピクセルのサイズが約0.26mmになります。

ピクセルを使用してフォントサイズを設定することは、維持するのが難しく、友好的ではありません。大規模なWebサイトのすべての要素のフォントを変更するのは悪夢です。さらに、ユーザーはブラウザフォントサイズの設定を介してピクセルユニットのフォントサイズを調整することはできません。

em unit（em）

emユニットは、ユーザーの好みの上書きを避けることができます。 1EMの値は、ブラウザのデフォルトフォントサイズ（通常16px）に依存します。要素のEM値は、継承する計算されたフォントサイズによって決定されます。たとえば、要素が25pxのフォントサイズを継承する場合、その要素の2EMは50pxとして計算されます。

EMユニットは、独立モジュール内の要素など、Webサイトの独立した部分内に関連要素のフォントサイズを設定するのに特に適しています。

rem unit（rem）

REMユニットは、EMユニットのフォントサイズ継承の問題を解決します。 1REMの値は常にルート要素のフォントサイズに等しく、計算を簡素化します。

REMユニットを使用して、異なる独立したモジュールの親コンテナのフォントサイズを設定できるため、モジュール内のすべての要素のフォントサイズは、他のモジュールから独立している間、親要素に基づいています。

パーセント（％）

パーセンテージはEMユニットに似ており、多くの場合、レスポンシブWebデザインのルート要素のフォントサイズを設定して計算を簡素化します。

ViewPort Units（VW、VH、VMIN、VMAX）ビューポートユニットでは、ビューポートサイズに応じて異なる要素のフォントサイズを設定できます。これにより、複数のブレークポイントで異なるフォントサイズ値を設定する必要がなくなります。たとえば、1VWはビューポート幅の1％に等しくなります。 ビューポートユニットの不利な点は、非常に小さいまたは非常に大きなビューポートサイズで、計算されたフォントサイズがテキストの読み取りを難しくする可能性があることです。解決策は、他のユニットと組み合わせてビューポートユニットを使用することです。

その他の絶対単位

CSSは、画面上ではあまり役に立たない多くの絶対ユニットを定義しますが、ポイント（PT）やPICAS（PC）などのメディアを印刷する上で重要な役割を果たします。

キーワードを使用してフォントサイズを設定します

フォントサイズは、絶対キーワード（xx-small、x-small、smell、medium、large、x-large、xx-large、xx-largeなど）を含むキーワードを使用して設定できます。

ブラウザサポート

これらのユニットを生産環境で使用する前に、ターゲットブラウザがそれを適切にサポートしていることを確認してください。 PX、EMなどのユニットはすべての主流ブラウザーでサポートされていますが、REMおよびビューポートユニットは古いブラウザでは不十分にサポートされている場合があります。

結論

絶対ユニットは可能な限り避ける必要がありますが、相対ユニットを使用する必要があります。 EMユニットは、モジュール内の子要素のフォントサイズを設定するのに適しており、REMユニットはモジュールのルート親要素などの独立した要素のフォントサイズを設定するのに適しています。ビューポートユニットは、他のユニットと組み合わせて使用​​して、レイアウトがビューポートの幅または高さの変化に十分に適合していることを確認できます。

この記事はTom Hodginsによってレビューされました。 SetePointのすべてのピアレビューアーズに感謝します。

以上がフォントサイズに使用できるCSS長さユニットのウォークスルーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。