<style>
body{font-family:"微軟正黑體";}
.red-color{color:#f00}
.blue-color{color:#f00}
</style>
###### tags: `css`
# em 與 rem 的差異
> [color=#000] [time=Sat, Nov 16, 2019 4:51 PM]
> [color=#000] [name=aikwdc00]
>

通常都是設置**px**來設置web元素的相關屬性，較少使用<span class="red-color">em</span>與<span class="red-color">rem</span>，就來深入何謂是em與rem

### em
* 相對於父元素的字體大小（2em表示當前字體大小的2倍）
* 假設外圍的父元素是16px,第一層子素指定1.25em相當於20px
* 默認字體大小1em為16px
* 可以指定到小數點後三位
* 通常使用在限制區域的內容
* 若用於其他屬性（width（包含max/min） or height（包含max/min）），則對於本身元素的字體大小

### rem
* 相對於根元素(html)的字體大小
* 通常使用在整體的尺寸切換，如rwd

參考以下兩個案例
1. 第一個“hello”，父元素為em的class，指定了20px，子元素設置2em
2. 第二個"hello"，html設置20px的字體大小，.rem的class元素在最外層宣告，但宣告rem，rem繼承於根元素

<iframe height="300" style="width: 100%;" scrolling="no" title="em and rem " src="https://codepen.io/aikwdc00/embed/YzzRBvQ?height=265&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/aikwdc00/pen/YzzRBvQ'>em and rem </a> by Fred
(<a href='https://codepen.io/aikwdc00'>@aikwdc00</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
<hr>

## 參考資料
> [w3school px transfer to em](https://www.w3schools.com/cssref/css_pxtoemconversion.asp)
> [w3school 單位說明](https://www.w3schools.com/cssref/css_units.asp)
> [六角學院 實際展示 EM 與 REM 的差異](https://www.hexschool.com/2016/01/02/2016-08-08-em-vs-rem/)
> [掘金 如何更愉快地使用rem](https://juejin.im/post/5b41bf63f265da0f8b2f9656)
> [深入理解CSS中的长度单位](https://www.cnblogs.com/xiaohuochai/p/5485683.html)
> [color=#64ef39]