CSS の単位 px、rem、em の簡単な分析

#絶対長

px

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

相対長さ

相対長さ rem em などが必要なのはなぜですか?

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

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

#rem

rem と px

rem の値は px## の倍数です。

# デフォルトでは、font-size = 16px、1rem = 16px

rem px

との相対計算関係を変更する方法は、HTML でのみ可能です。タグ (HTML ノードはルート ノードであるため、rem の r: ルートです)、font-size: 32px を変更します。つまり、1rem = 32px

Code

<p class="p-rem">rem</p>
/* rem的用法 */
html{
    font-size:16px;  // 1rem = 16px
}
.p-rem{
    width: 10rem;    // 10rem = 10 x 16 = 160px
    height: 10rem;   // 10rem = 10 x 16 = 160px
    font-size: 1rem; // 1rem = 16px
    background-color: #a58778;
}

em

em と px

em の値は px

の倍数です。デフォルトでは、font-size = 16px、その後 1em = 16px

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

独自の要素のフォント サイズを 32px に変更して、1em = 32px# にします。

##独自の要素サイズに font-set がない場合は、親要素に font-size を設定して、独自の要素 (子要素) で使用される em 値に影響を与えることもできます。

推奨チュートリアル: 「

CSS チュートリアル

」

以上がCSS の単位 px、rem、em の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。