在CSS中，em 和 百分比％是相對的測量單位，意思是設定這兩個為單位的時候，會依據父層物件尺寸為基準，來決定目前設定的物件尺寸。
但是px和其他單位就是固定的測量單位。
原始的W3C定義
說得挺簡單的，翻譯得不好的話請見諒。
出處：http://dev.w3.org/csswg/css3-values/#em-unit
Equal to the computed value of the ‘font-size’ property of the element on which it is used.
等於元素正在使用的‘font-size’屬性值。
範例7
h1 { line-height: 1.2em }
意思是標題1的行高，會比原始的h1元素行高大20%
h1 { font-size: 1.2em }
意思是標題1的文字尺寸，會比從原始HTML中繼承過來的h1尺寸大20%
以上是W3C的原始說明，感覺還不太夠，所以另找了一個：
.element {
font-size: 20px;
width: 4em;
height: 4em;
}
意思是寬度和高度都會設定為20x4=80px
如果原始元素沒有定義font-size的話
那1em就等於16px。
另一個你可能想知道的單位rem
rem是CSS3才有的新單位。
Equal to the computed value of ‘font-size’ on the root element.
等於根元素的font-size值，根元素就是，html 啦！
html {
font-size: 20px;
}
p {
font-size: 1.5rem;
}
段落p的尺寸就變成20x1.5=30px啦
留言
張貼留言