前一陣子在響應(yīng)式開發(fā)中遇到了em和rem的問題，也上網(wǎng)搜過一些文章，篇幅很長，也沒有仔細(xì)看，今天來總結(jié)一下。

?

rem是指：根元素（root element，html）的字體大小，

em是指：父元素的字體大小。

下面看一個例子：

　　

div{ font-size: 30px; } div span{ font-size: 2em; }<div> div下的元素 <span>span里的元素</span> </div>

　　在chrome中顯示：

也就是說，span里的文字大小是根據(jù)父元素div的font-size大小設(shè)置的。

測試rem的代碼和運(yùn)行結(jié)果就不貼上來了

body{

　　font-size:16px;

}

p{

　　font-size:2rem;/*此時p元素中的文字size為32px；

}

可以設(shè)置body的font-size為62.5%，也就是10px（比如瀏覽器默認(rèn)字體大小16px），1.3rem=13 px，計算方便點(diǎn);

?

注:可以引入 CSS 預(yù)處理工具（Sass、LESS 、Stylus等）自動計算 rem 值。

文章為原創(chuàng)，轉(zhuǎn)載請注明出處，謝謝

?

轉(zhuǎn)載于:https://www.cnblogs.com/gagag/p/6080500.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的彻底弄懂响应式设计中的em和rem的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。