css中單位em和rem的區別

時間 2019-11-21

標籤 css 單位 rem 區別欄目 CSS 简体版

原文原文鏈接

在css中單位長度用的最多的是px、em、rem，這三個的區別是：css

　　px是固定的像素，一旦設置了就沒法由於適應頁面大小而改變。html

　　em和rem相對於px更具備靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用於響應式佈局。css3

對於em和rem的區別一句話歸納：em相對於父元素，rem相對於根元素。chrome

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;
} p { 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;
}

結果以下：spa

鞏固測驗：你能說出孫元素span的font-size和width嗎？3d

答案：我猜你會說10px、100px，哈哈，其實邏輯上是正確的，可是若是你是chrome瀏覽器我不得不告訴你應該是12px、120px。由於chrome設置的最小code

字體大小爲12px，意思就是說低於12px的字體大小會被默認爲12px，固然這一尬境能夠由css3解決，這裏就很少說了。

chrome默認的字體大小是12px，也就是1em默認爲12px，若是最外層的父元素直接把font-size設爲1.5em，那麼該元素的字體大小爲18px（12*1.5）。

rem

rem是所有的長度都相對於根元素，根元素是誰？<html>元素。一般作法是給html元素設置一個字體大小，而後其餘元素的長度單位就爲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;
}