前一陣子在響應式開發中遇到了em和rem的問題，也上網搜過一些文章，篇幅很長，也沒有仔細看，今天來總結一下。

?

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

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

下面看一個例子：

　　

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

　　在chrome中顯示：

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

測試rem的代碼和運行結果就不貼上來了

body{

　　font-size:16px;

}

p{

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

}

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

?

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

文章為原創，轉載請注明出處，謝謝

?

轉載于:https://www.cnblogs.com/gagag/p/6080500.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。