🔸em

╱🚧 under construction -> :root, <html>, document.documentElement

CSS ⟩ values ⟩ relative ⟩ units ⟩ em

em = 自己的 font-size (可能是自己設定，或繼承來的)

當元素多層嵌套同時使用 em，會導致累積效應，這種行為稱為「複合繼承」。使用 rem 可以避免這種累積效應，較為穩定。

📁 css 👉 codepen

/* em = 自己的 font-size (自己設定或繼承來) */
html    { font-size: 16px;  }    /* em = 16px */

div     { font-size: 2em;   }    /*   2em = 2   * 16px = 32px */
p       { font-size: 0.5em; }    /* 0.5em = 0.5 * 32px = 16px */
p.case2 { font-size: 1.5em; }    /* 1.5em = 1.5 * 32px = 48px */

📁 html

<div>
	<!--  em = <html> font-size = 16px -->
	<!-- 2em = 2 * 16px         = 32px -->
	div: 2em = 32px (html: em = 16px)
	<p>
		<!--    em = <div> font-size = 32px -->
		<!-- 0.5em = 0.5 * 32px      = 16px -->
		p: 0.5em = 16px (div: em = 32px)
	</p>
</div>

<div>
	div: 2em = 32px (html: em = 16px)
	<p class="case2">
		<!--    em = <div> font-size = 32px -->
		<!-- 1.5em = 1.5 * 32px      = 48px -->
		p: 1.5em = 48px (div: em = 32px)
	</p>
</div>

用 em 會導致累積效應，用 rem 可避免這種效應。

Previousrem Nextcolors

Last updated 3 months ago

Was this helpful?