尺寸種類
PX
絕對單位，是一般最常見的網頁設計單位，他是「絕對數值」，也就是設定多少就顯示多少。
em
相對單位，每個 子元素 透過「倍數」乘以 父元素 的 px 值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <style>
html {
font-size: 16px;
}
.wrap1 {
font-size: 20px;
}
.wrap2 {
font-size: 2em;
}
.wrap3 {
font-size: 3em;
}
</style>
<div class="wrap1">
wrap1 => 20px
<div class="wrap2">
wrap2 => 40px
<div class="wrap3">
wrap3 => 120px
</div>
</div>
</div>
|
rem
相對單位，每個 元素 透過「倍數」乘以 根元素(html) 的 px 值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <style>
html {
font-size: 16px;
}
.wrap1 {
font-size: 20px;
}
.wrap2 {
font-size: 2rem;
}
.wrap3 {
font-size: 1rem;
}
</style>
<div class="wrap1">
wrap1 => 20px
<div class="wrap2">
wrap2 => 32px
<div class="wrap3">
wrap3 => 16px
</div>
</div>
</div>
|
百分比 %
每個 子元素 透過「百分比」乘以 父元素 的 px 值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <style>
html {
font-size: 16px;
}
.wrap1 {
font-size: 20px;
}
.wrap2 {
font-size: 110%;
}
.wrap3 {
font-size: 120%;
}
</style>
<div class="wrap1">
wrap1 => 20px
<div class="wrap2">
wrap2 => 22px
<div class="wrap3">
wrap3 => 26.4px = wrap2 * 120%
</div>
</div>
</div>
|
參考資料
一次搞懂 CSS 字體單位：px、em、rem 和 %
PX、EM、REM
網頁用的尺寸單位:PX 跟 EM 怎麼區分呀？等等，還有一個 REM…
對於頁面適配，你應該使用px還是rem