CSS単位のpxとemとrem

pxは絶対値を固定する単位である.一方,em環境とrem環境によって変化する単位である.

em vs rem

Emとremはブラウザ環境で可変単位としてpxに変換される.
Emは、同じレイヤーで指定したfont-sizeをpxに置き換えて画面に表示します.同じエンティティのフォントサイズ値が設定されていない場合は、親要素のフォントサイズに基づいています.

* 0.5em = 16px x 0.5 = 8px
* 1em = 16 px x 1 = 16px
* 2em = 16 px x 2 = 32px
* 3em = 16 px x 3 = 48px

div {
	font-size: 16
}
div {
	//16x
	font-size : 1em 

remは、トップエンティティで指定したfont-size値に基づいて変換されます.通常はHTMLタグで指定されたfont-sizeに基づいています.
個別のfont-sizeが設定されていない場合、各ブラウザはデフォルト設定の値を継承します.

html {
  font-size : 10px; /*설정 안했을 때는 브라우저 기본 값으로 */
}
div {
  margin: 1.5em; /*대략 15px*/
}

remは標準のフォントサイズに固定されているが,emの欠点は,同じ領域でもどこでも標準が変更される可能性があるため,複雑なcssを有すると変換のサイズを予測することが困難であることである.
多くのCSSガイドがemを使用する合理的な理由がない場合は、できるだけremを優先することをお勧めします.