px、rem、em、vh、vw の違いを深く理解する

#絶対長さ

px

px はピクセル値です, 私たちのメートルやセンチメートルなど、固定された長さです。

相対長さ

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

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

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

#rem

rem と px

rem の値は px

の倍数ですデフォルトでは, font-size = 16px, then 1rem = 16px

rem px

との相対計算関係を変更する方法は、html タグ内でのみ可能です (html ノードがルート ノードであるため)これは rem :root の r です)、font-size: 32px を変更して、1rem = 32px

code

<div class="div-rem">rem</div>

/* rem的用法 */
html{
    font-size:16px;  // 1rem = 16px
}
.div-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 の計算関係 em の値は px

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

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

独自の要素の font-size を変更できます: 32px、つまり 1em = 32px

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

レムとエムの違い

以上がpx、rem、em、vh、vw の違いを深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。