rem 與 em 的使用
- 在布局中更建議使用 rem 來進(jìn)行布局(移動(dòng)端更是),盡量避免 px 的布局
- 因?yàn)?rem 基準(zhǔn) font-size 的改動(dòng)更容易使得頁面能夠進(jìn)行整體的縮放
- rem 幾乎可以布局所有設(shè)計(jì)的屬性
- 包括 height嗽元,width索烹,padding龙致,margin必指,border禽笑,font-size 等等幾乎包括了你布局的所有部分
- 一般 rem 基準(zhǔn)值的設(shè)置為
font-size:20px;
或者font-size:125%;
- 因?yàn)?16 x 125% = 20px , 16px 又為大多數(shù)瀏覽器默認(rèn)字體大小
- em 在布局中一般用于一小塊的特殊布局
- 比如在成型的配置錯(cuò)誤項(xiàng)目下去添加新的頁面冯乘,因?yàn)椴荒苡绊懺械牟季郑ň筒荒苁褂?rem)蛉鹿,所以可以采用 em 的方式,去定義該頁面的單獨(dú)作用域塊
- 比如說書寫一個(gè)組件往湿,如導(dǎo)航菜單的 padding、 margin惋戏,line-height 等值就可以用 em 的方式
rem 與 em 的區(qū)別
- rem 的大小是相對(duì)于
<html></html>
標(biāo)簽中定義的 font-size 大小的
- 幾乎所有的瀏覽器默認(rèn)字體大小均為 16px
- em 的大小是相對(duì)于它的父級(jí)元素的具體定義了的 font-size 大小的
- font-size 大小為 xx em 的不算领追,必須找到它的 font-size 定義了具體值的,如百分比或具體數(shù)字的响逢,如果沒有找到就一直向上找绒窑,直至找到符合的父級(jí)元素
rem 與 em 的開發(fā)時(shí)配置問題
- 可以運(yùn)用 postcss 中的 postcss-pxtorem 插件,來自動(dòng)將 px 轉(zhuǎn)換為 rem
- 將 rootValue 屬性設(shè)置為 20(設(shè)置為 20 的原因上面提到過)舔亭,即
rootValue: 20
- 開發(fā)設(shè)計(jì)中
<html></html>
標(biāo)簽設(shè)置 font-size 的值 / rootValue值 = 1rem