CSS における px、rem、em、vh、vw の違いを簡単に分析します

絶対長さ

ピクセル

px はピクセル値であり、メートルやセンチメートルのような固定の長さです。

相対的な長さ

rem em などの相対的な長さがなぜ必要なのでしょうか?

固定長では現在のニーズを満たすことができなくなりました。

たとえば、画面のサイズを縮小する場合、ボックスの幅と高さを縮小するだけでなく、フォント サイズも縮小してユーザー エクスペリエンスを向上させる必要があります。

レム

remとpxの計算関係

remの値はpxの倍数です

デフォルトでは、font-size = 16pxなので、1rem = 16pxです。

remとpxの相対計算関係を変更する方法

htmlタグのfont-size: 32pxのみ変更できます（htmlノードはルートノードであり、remのr:rootであるため）。したがって、1rem = 32pxです。

コード

<div class="div-rem">レム</div>
/* rem の使用法 */
html{
    フォントサイズ:16px; // 1rem = 16px
}
.div-rem{
    幅: 10rem; // 10rem = 10 x 16 = 160px
    高さ: 10rem; // 10rem = 10 x 16 = 160px
    フォントサイズ: 1rem; // 1rem = 16px
    背景色: #a58778;
}

それら

emとpxの計算関係

emの値はpxの倍数です

デフォルトでは、font-size = 16pxなので、1em = 16pxです。

emとpxの相対計算関係を変更する方法

要素のフォントサイズを32pxに変更できるので、1em = 32pxとなります。

要素にフォント サイズが設定されていない場合は、親要素にフォント サイズを設定して、要素 (子要素) で使用される em 値に影響を与えることもできます。

remとemの違い

要約する

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