em 和 rem 筆記
簡(jiǎn)單介紹
單位
在編寫網(wǎng)頁(yè)過程中来破，需要對(duì)元素（標(biāo)簽）進(jìn)行寬高、顏色忘古、字體等的設(shè)置徘禁，這些需要使用單位。
在css中髓堪，設(shè)置字體和寬高使用的單位可以一致送朱，例如： px/em/rem/...
rem 來源
rem 是css3中的單位
和px的關(guān)系
px是使用最多的單位娘荡。
em和rem可以和px單位進(jìn)行換算，就如克和千克可以換算一樣驶沼。
具體換算規(guī)則炮沐，如下。
建議
在做移動(dòng)端項(xiàng)目的時(shí)候回怜，建議使用
rem作為單位
可以方便大年、快捷、容易的實(shí)現(xiàn)響應(yīng)式效果
em詳細(xì)說明
em 參照父級(jí)元素大小
如果父元素 font-size:20px;, 給子元素設(shè)置字體font-size:1em;, 子元素其實(shí)就是20px的大小
** 示例：**
- 設(shè)定1em = 20px
- 2em = 40px
- 2.5em = 50px
- 0.5em = 10px
em合適的使用場(chǎng)景：text-indent(首行縮進(jìn))/line-height(行高)
rem詳細(xì)說明
rem參考的是html標(biāo)簽字體大小
rem 和 em 不通電就是 em 參考各自的父元素玉雾， 如果父元素沒有設(shè)置字體大小翔试，則繼續(xù)向上尋找（父父元素）， 直至最后
rem 直接參照html標(biāo)簽字體大小复旬，并且是所有使用rem 單位的都是參照html標(biāo)簽
所有只需要更改html``標(biāo)簽字體大小遏餐，就可以影響全部使用rem`單位的標(biāo)簽
** 代碼示例：**
html {
font-size:100px;
}
.title {
width:5rem; /*500px*/
height:5rem; /*500px*/
font-size:.3rem; /*30px*/
}
在做響應(yīng)式網(wǎng)址時(shí)，可以根據(jù)媒體查詢?nèi)フ{(diào)節(jié)
html標(biāo)簽字體大小,實(shí)現(xiàn)共同調(diào)節(jié)其他變遷大小的效果
使用媒體查詢?nèi)フ{(diào)節(jié)html標(biāo)簽字體大小赢底，效果不夠精細(xì)（大小都是分段改變的），可以使用javascrit動(dòng)態(tài)計(jì)算html的font-size
使用注意點(diǎn)
在rem 使用過程中柏蘑，要時(shí)刻注意字體最小12px的問題
設(shè)置html的font-size屬性的時(shí)候幸冻，最好不要小于12px
如果設(shè)置了10px，使用1rem的時(shí)候咳焚，其實(shí)就是12排序洽损，因?yàn)樽钚?2px
