px、em、remの違い

これらはすべて、フォントのサイズ、ボックスの幅と高さを設定するために使用されますが、px はブラウザのサイズの変更によって変更されませんが、em と rem は変更によって変更されます。

コードを記述する過程で、CSS でフォ​​ントのサイズや要素の幅と高さを定義するときにサイズ単位を使用することがよくあります。今日は、その一般的な単位について詳しく紹介します。 CSS でのサイズ単位の名前とその使用方法が、皆様の参考になれば幸いです。

【おすすめコース: CSSチュートリアル】

##px

px はピクセルの略称で、フォントサイズや要素の幅、高さを指定する際に使用します。ピクセルはモニター画面の解像度に比例します。

例: div 要素の幅を 200 ピクセル、高さを 200 ピクセルに設定します。

div{
width:200px;
height:200px;
border: 1px solid #ccc;
text-align: center;
line-height: 200px;
font-size: 16px;

		}

効果は次のとおりです。

em

em は、現在のオブジェクト内のテキストのフォント サイズに相対的な長さの単位です。現在のテキストのフォント サイズを設定していない場合、em はブラウザのデフォルトのフォント サイズに対する相対値になります。

ブラウザのデフォルトのフォント サイズは 16px、つまり 1em=16px です。 Em を書くとき、アダプティブ レイアウトではユニットがよく使用されます。 CSS の本文セレクターでフォント サイズの値を設定し、ページ上のすべての em が本文の値を基準にするようにしてコードを簡素化します。

例: サイズ単位を em

1em=16px に変更して、div 要素の幅を 100px、高さを 100px に設定します。つまり、100px=6.25em

<style>
div{
width:6.25em;
height:6.25em;
border: 0.0625em solid #ccc;
text-align: center;
line-height: 6.25em;
}
</style>

Effect Picture:

値を本体に直接設定して、その値が本体に直接相対するようにして、元の px 値を 10 で割ることもできます。 em

body{
font-size: 62.5%
	}
div{
width:10em;
height:10em;
border:0.1em solid #ccc;
}
</style>

Rendering:

の値 上の図から、em の値は固定されておらず、親に対して相対的であることがわかります。レベル要素のサイズ

#rem:

rem は、CSS3 の新しい相対単位です。em との違いは、rem を使用してフォント サイズを設定する場合です。要素。依然として相対的なサイズですが、HTML ルート要素に対してのみ相対的です。使い方は非常に簡単で、ルート要素のサイズを変更することで値を変更できます。

例: サイズ単位を rem# に変更して、div 要素の幅を 100px、高さを 100px に設定します。 ##

body{
		font-size:10px;
	}
		div{
			width:15rem;
			height:15rem;
			border:0.01rem solid pink;
			text-align: center;
			line-height: 15rem;
			font-size: 2rem;
		}

レンダリング:

要約: 上記がこの記事の全内容です。皆様のお役に立てれば幸いです。

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