px是固定的像素，一旦設(shè)置了就無法因?yàn)檫m應(yīng)頁面大小而改變。

em和rem相對于px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用于響應(yīng)式布局。

對于em和rem的區(qū)別一句話概括：em相對于父元素，rem相對于根元素。

rem中的r意思是root（根源），這也就不難理解了。

em

子元素字體大小的em是相對于父元素字體大小

元素的width/height/padding/margin用em的話是相對于該元素的font-size

上代碼：

 div 我是父元素div p 我是子元素p span 我是孫元素span /span /p /div 

div { font-size: 40px; width: 10em; /* 400px */ height: 10em; border: solid 1px black; font-size: 0.5em; /* 20px */  width: 10em; /* 200px */ height: 10em; border: solid 1px red;}span { font-size: 0.5em;  width: 10em; height: 10em; border: solid 1px blue; display: block;}

結(jié)果如下：

鞏固測驗(yàn)：你能說出孫元素span的font-size和width嗎？

答案：我猜你會(huì)說10px、100px，哈哈，其實(shí)邏輯上是正確的，但是如果你是chrome瀏覽器我不得不告訴你應(yīng)該是12px、120px。因?yàn)閏hrome設(shè)置的最小

字體大小為12px，意思就是說低于12px的字體大小會(huì)被默認(rèn)為12px，當(dāng)然這一尬境可以由css3解決，這里就不多說了。

chrome默認(rèn)的字體大小是12px，也就是1em默認(rèn)為12px，如果最外層的父元素直接把font-size設(shè)為1.5em，那么該元素的字體大小為18px（12*1.5）。

rem

rem是全部的長度都相對于根元素，根元素是誰？ html 元素。通常做法是給html元素設(shè)置一個(gè)字體大小，然后其他元素的長度單位就為rem。

上代碼：（html代碼如上，只是把css代碼的元素長度單位變了）

html {font-size: 10px; }div {font-size: 4rem; /* 40px */width: 30rem; /* 300px */height: 30rem;border: solid 1px black;}p {font-size: 2rem; /* 20px */width: 15rem;height: 15rem;border: solid 1px red;}span {font-size: 1.5rem;width: 10rem;height: 10rem;border: solid 1px blue;display: block;}

所以你可以說出span的font-size具體值嗎？

當(dāng)用rem做響應(yīng)式時(shí)，直接在媒體中改變html的font-size那么用rem作為單位的元素的大小都會(huì)相應(yīng)改變，很方便。

看到這里我想我們都更深刻的體會(huì)了em和rem的區(qū)別（參照物不同）。

總結(jié)：

在做項(xiàng)目的時(shí)候用什么單位長度取決于你的需求，我一般是這樣的：

像素（px）：用于元素的邊框或定位。

em/rem：用于做響應(yīng)式頁面，不過我更傾向于rem，因?yàn)閑m不同元素的參照物不一樣（都是該元素父元素），所以在計(jì)算的時(shí)候不方便，相比之下rem就只有一個(gè)參照物（html元素），這樣計(jì)算起來更清晰。

歡迎大家在評論區(qū)與我交流，覺得不錯(cuò)就點(diǎn)個(gè)贊吧，謝謝。

以上就是css中單位em和rem有什么區(qū)別的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。