ホームページ > 記事 > ウェブフロントエンド > px、rem、em、vh、vw の違いを深く理解する
#絶対長さ
px
px はピクセル値です, 私たちのメートルやセンチメートルなど、固定された長さです。相対長さ
なぜ相対長さ rem em などが必要なのでしょうか? 固定長では現在のニーズを満たすことができなくなりました。 例: たとえば、画面を縮小するときは、ユーザー エクスペリエンスを向上させるために、ボックスの幅と高さを減らすだけでなく、フォント サイズも小さくする必要があります。 。#rem
rem と pxrem の値は px の倍数ですデフォルトでは, font-size = 16px, then 1rem = 16pxrem pxとの相対計算関係を変更する方法は、html タグ内でのみ可能です (html ノードがルート ノードであるため)これは rem :root の r です)、font-size: 32px を変更して、1rem = 32pxcode
<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 と pxem の計算関係 em の値は px の倍数です。デフォルトでは font-size = 16px、その場合 1em = 16pxem と px の関係の相対計算を変更する方法独自の要素の font-size を変更できます: 32px、つまり 1em = 32pxfont-size が要素で設定されていない場合独自の要素では、親要素のサイズに font-size を設定することもでき、それによって独自の要素 (子要素) で使用される em 値に影響を与えます。 レムとエムの違い以上がpx、rem、em、vh、vw の違いを深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。