單位 em 和 rem 的區別
原文鏈接: css中單位em和rem的區別
在 css 中單位長度用的最多的是 px、em、rem,這三個的區別是:
px 是固定的像素,一旦設置了就無法因爲適應頁面大小而改變。
em 和 rem 相對於 px 更具有靈活性,他們是相對長度單位,意思是長度不是定死了的,更適用於響應式佈局。
對於 em 和 rem 的區別一句話概括:em 相對於父元素,rem 相對於根元素。
rem 中的 r 意思是 root(根源),這也就不難理解了。
em
- 子元素字體大小的 em 是相對於父元素字體大小
- 元素的 width/height/padding/margin用 em 的話是相對於該元素的 font-size
上代碼:
<div>
我是父元素
<p>
我是子元素 p
<span>
我是孫元素 span
</span>
</p>
</div>
* {
padding: 0;
margin: 0;
}
div {
font-size: 40px;
width: 10em; /* 400px */
height: 10em;
border: 1px solid black;
}
p {
font-size: 0.5em; /* 20px */
width: 10em; /* 200px */
height: 10em;
border: 1px solid red;
}
span {
font-size: 0.5em;
width: 10em;
height: 10em;
border: 1px solid blue;
display: block;
}
結果如下:
鞏固測驗:你能說出孫元素 span 的 font-size 和 width 嗎?
答案:我猜你會說 10px、100px,哈哈,其實邏輯上是正確的,但是如果你是 chrome 瀏覽器我不得不告訴你應該是 12px、120px。因爲 chrome設置的最小字體大小爲 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: 1px solid black;
}
p {
font-size: 2rem; /* 20px */
width: 15rem;
height: 15rem;
border: 1px solid red;
}
span {
font-size: 1.5rem;
width: 10rem;
height: 10rem;
border: 1px solid blue;
display: block;
}
所以你可以說出 span的 font-size 具體值嗎?
當用 rem做響應式時,直接在媒體中改變 html的 font-size 那麼用 rem 作爲單位的元素的大小都會相應改變,很方便。
看到這裏我想我們都更深刻的體會了 em 和 rem 的區別 (參照物不同)。
總結:
在做項目的時候用什麼單位長度取決於你的需求,我一般是這樣的:
像素(px):用於元素的邊框或定位。
em/rem:用於做響應式頁面,不過我更傾向於 rem,因爲 em不同於元素的參數物不一樣(都是該元素父元素),所以在計算的時候不方便,相比之下 rem 就只有一個參數物(html 元素),這樣計算起來更清晰。