CSS における px、em、rem、%、vw、vh 単位の違いの詳細な説明

1.ピクセル

px はピクセルの略語で、画面解像度に対する相対的な長さの単位です。

2. えむ

参照は親要素のフォント サイズであり、継承の特性を持ちます。ブラウザのデフォルトのフォント サイズは 16 ピクセルであり、1em はページ全体で固定値ではありません。

フォントサイズも 1.5​​em ですが、効果はまったく異なります。W3C が提供する式によると、次のように計算できます。クラス id1 の div のフォントサイズは、親要素本体から継承されます: 16px*1.5em = 24px クラス id2 の div のフォントサイズは、親要素 id1 から継承されます: 24px*1.5em = 36px クラス id3 の div のフォントサイズは、親要素 id2 から継承されます: 36px*1.5em = 54px

3. レム

rem は CSS3 で追加された相対単位ですが、HTML ルート要素に対してのみ相対的です。ルート要素のみを変更すると、レイヤーごとにフォント サイズが複合される連鎖反応を回避しながら、すべてのフォント サイズを比例的に調整できます。

4.%

% パーセンテージ、相対的な長さの単位、親要素に対するパーセンテージ値

要素の幅と高さとフォントサイズの違い:

（１）相対的な大きさの単位を使うようにする

相対的なサイズ単位を使用して測定する場合、ページのレイアウトを調整するときに、すべての内部 DOM 構造を走査して内部の子要素のサイズをリセットする必要はありません。親コンテナやページ全体のレイアウトによってサイズが変わる場合は、要素の高さや幅を設定するなど、 % を使用する方が適切です。

（２）フォントサイズにはemとremを使うようにする

フォントサイズの保守性や拡張性を考えると、em の使用をお勧めします。相対的なフォントサイズ設定が 3 層以上ある場合は、rem の使用を検討してください。

5. vw と vh

vm、vh、vmin、vmax はビューポート単位と相対単位です。ページの親ノードまたはルートノードに対して相対的ではありません。代わりに、ビューポートのサイズによって決定され、単位は 1 で、これは 1% などを表します。 ビューポートとは、実際にコンテンツを表示するブラウザの領域、つまりツールバーやボタンを除いた Web ブラウザのことです。

具体的な説明は以下のとおりです。

vw: ビューポートの幅のパーセンテージ（1vwはビューポートの幅が1%であることを意味します）
vh: ビューポートの高さのパーセンテージ
vmin: 現在のVwとVhの小さい方の値を取る
vmax: 現在のVwとVhの大きい方の値を取る

vh と vw はビューポートの高さと幅を基準とします。1vh はビューポートの高さの 1/100 に等しく、1vw はビューポートの幅の 1/100 に等しくなります。たとえば、ブラウザの高さが 900px、幅が 750px の場合、1 vh = 900px/100 = 9 px、1vw = 750px/100 = 7.5 px となります。画面と同じ高さのボックスを簡単に実現できます。

calc + vmは幅を計算します

幅: 800ピクセル; 
幅: -moz-calc(100vm - (2 * 10)px);
幅: -webkit-calc(100vm -(2 * 10)px);
幅: calc(100vm - (2 * 10)px);

要約する

CSS における px、em、rem、%、vw、vh 単位の違いについて詳しく解説した記事は以上です。px、em、rem、%、vw、vh 単位の違いについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。