CSS # 9— 單位與數值

Published in

Thomas 學習筆記

8 min readJun 14, 2020

在 CSS 屬性中有些需要設定單位與數值例如 : 寛(width) 、高(height) 、字型(font-size)等等…，這些屬性的設定關係到切板的時候呈現出來的畫面，那我們就來介紹 CSS 中的單位 px、em、rem、%、vw 與 vh 的差異性。

px

px 它的意思是像素(pixel)，在 CSS 中我們稱 px 為絕對數值，它不受父層的單位影響，只要固定是 12px，就會以 12 像素呈現。在 pixel 實際的大小是由顯示器的解析度與螢幕的寛度來決定。

//**CSS**
div {
 font-size: 16px;
}h1 {
 font-size: 20px;
}p {
 font-size: 30px;
}img {
 width: 300px;
}//**HTML**
<div>
  <h1>Lorem ipsum dolor sit.</h1>
  <p>Lorem ipsum dolor sit.</p>
  <img src="https://picsum.photos/200/100/?random=1">
</div>

我們來觀察每個元素中的 font-size 屬性，並不會互相干擾。

em

它是個相對單位，定義為英文字母【M】的寛，也就是寛度的單位。它的繼承的基準為父元素字型，通常瀏覽器的預設字型大小為16px，會對應到 document 底下根元素 <html> 的字型預設寛度，如 1em = 16px 而子元素會因此單位做繼承概念，如根元素 <html> 的字型預設寛度為 32px ，子元素 1em = 32px。

//**CSS**
.outer{
  font-size:1.5em;
}.middle{
  font-size:2em;
}.inner{
  font-size:2.5em;
}.img{
  width:3em;
}//**HTML**
<div class="outer">我是 outer
  <div class="middle">我是 middle
   <div class="inner">我是 inner
     <img class="img" src="https://picsum.photos/200/100/?random=1">
    </div>
  </div>
</div>

渲染結果 :

outer 繼承父層 <html>根示素預設字型 16px，所以 1.5em = 24px
middle 繼承父層 outer 預設字型 24px，所以 2em = 48px
inner 繼承父層 middle 預設字型 48px，所以 2.5em = 120px
img 繼承父層 inner 預設字型 120px，所以 3em = 360px

當要計算 margin、padding 的大小時，須使用以下公式:

父層元素 font-size * 子元素 font-size * margin/padding

如： <html>根元素預設字型為 16px ，子元素字型為 2em ，margin 大小為 1.5em ，計算結果為 :

16px * 2em * 1.5em = 48px

rem

它的概念與 em 大同小異，但差異於繼承的基準為 <html>根元素，簡單來說 em 會依照父層元素的 font-size 改變字型的大小，所以越內層的子元素字型可能會越難計算基準寛度變成多少，相對的 rem 就簡單許多因單純以 <html>根元素為基準。

//**CSS**
.outer{
  font-size:1.5rem;
}.middle{
  font-size:2rem;
}.inner{
  font-size:2.5rem;
}.img{
  width:3rem;
 }

渲染結果 :

outer 繼承父層 <html> 根示素預設字型 16px，所以 1.5rem = 24px
middle 繼承父層 <html> 根示素預設字型 16px，所以 2rem = 32px
inner 繼承父層 <html> 根示素預設字型 16px，所以 2.5rem = 40px
img 繼承父層 <html> 根示素預設字型 16px，所以 3rem = 48px

當要計算 margin、padding 的大小時，須使用以下公式:

<html> 根示素預設字型 16px * margin/padding 單位

如： <html>根元素預設字型為 16px ，padding大小為 1.5rem ，計算結果為 :

16px * 1.5rem = 24px

百分比 %

它是相對單位且也是有繼承的概念，只不過須要以屬性的不同會呈現不同的結果，如子元素 width/height 、font-size 單位為 % ，就會繼承父元素的 width/height 為基準，但如子元素 line-height 則以元素本身為基準。

//**CSS**
.outer{
  font-size:100%;
}.middle{
  font-size:200%;
}.inner{
  font-size:50%;
}.img{
  width:10%;
 }

渲染結果 :

outer 繼承父層 <html>根示素預設字型 16px，所以 100% = 16px
middle 繼承父層 outer 預設字型 16px，所以 200% = 32px
inner 繼承父層 middle 預設字型 32px，所以 50% = 16px

img 繼承父層 inner 預設字型 16px，所以 10% 不是要等於 1.6px，怎麼與我們想的不一樣呢？我們再 .inner 與 img 重新新增屬性如下，那我們來看看差異。

.inner{
  font-size:50%;
  outline:2px dashed red;
}.img{
  width:10%;
  display:block;
  outline:2px dashed blue;
}

會發現 % 單位並不是與 rem 或 em 單位相同於使用 font-size 為基準，因為 img 是圖片不是文字所以不會去繼承父層 inner 預設字型，而是繼承了父層 inner 容器的百分比 % ，所以 img 的 10% 是父層 inner 容器的 10% 大小，會隨著父層 inner 容器的寛度縮小並跟著改變 img 的寛度縮小。

絕對單位 px 換算相對單位 %

你會常常需要換算絕對單位與相對單位，尤其是當你的資訊來源是設計稿時，你只能從設計稿上得知絕對的長度，此時需要改寫成相對單位。

換算公式為：(target ÷ context) * 100% = result

target — 子元素絕對單位
context — 父元素絕對單位
result — 百分比

//**CSS**
.wrapper{
  width:960px;
}
.container{
  width:900px;
}
.main{
  width:650px;
}
.side{
  width:215px;
}

如此一來就能增加網頁的彈性，但不影響到現有佈局了！

vw 與 vh

vw 意思為在瀏覽器中寛度的可視區，反之 vh 高度的可視區，v 它的解釋為 viewport (視口)，是不是難以理解呢！我們使用範例來說明吧。

有個 img 圖片想要將它的寛度設定為瀏覽器的寛度一半，就可以使用此方式來設定。

//**CSS**
body{
  margin:0;  
}img{
  display:block;
  width:50vw;
}

會發現 img 會隨著視口的伸縮而改變本身的大小，並且只佔視的的一半寛度。

…

參考： 前端新手村 CSS 的單位

以上是我對 CSS # 9 — 單位與數值 的學習筆記 😉。

***如果有任何想法，也歡迎留言與我分享~

***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***

CSS # 9— 單位與數值

絕對單位 px 換算 相對單位 %

Written by Thomas Hung

絕對單位 px 換算相對單位 %