็ถๅ
็ด ๅคๅฑคๅตๅฅๅๆไฝฟ็จ em๏ผๆๅฐ่ด็ดฏ็ฉๆๆ๏ผ้็จฎ่ก็บ็จฑ็บใ่คๅ็นผๆฟใใไฝฟ็จ ๅฏไปฅ้ฟๅ
้็จฎ็ดฏ็ฉๆๆ๏ผ่ผ็บ็ฉฉๅฎใ
๐ css
/* 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 ๅฏ้ฟๅ
้็จฎๆๆใ