跟著KP用21天征服Responsive Layout-W1-熟悉相對單位(relative units)

Shang

更新於 2023/08/23發佈於 2023/08/23閱讀時間約 7 分鐘

這周KP分享的第二個概念是相對單位(relative units) 、使用的2個原則與陷阱、如何應用它們來做Responsive Layout。

甚麼是相對單位(relative units)

相對單位(relative units)有兩種:

相對於px是固定的單位，相對單位會根據某個基準下去縮放。相對單位可以在字體大小(font-size)與距離間距(padding、margin)使用。

1.em

1.使用於字體大小

使用在字體大小(font-size)的話，em的基準點就是父層元素(parent)。這裡來看個例子:

<div class="parent">
父層
<div class="child">
子元素
</div>

</div>

.chid{
font-size:2em
}

parent 沒有設定font-size,其font-size就會是瀏覽器預設的16px
child的font-size設定2em,其基準是parent。所以child的font-size就是16px*2 = 32px

2.使用於距離間距

<div class="parent">
父層
<div class="child">
子元素
</div>

</div>

.chid{
font-size:2em;
padding: 1em,/*加上padding*/
margin:2em;/*加上margin*/

}
}

child的font-size如上述是32px
child的padding是1em,這時候相對的基準是child的font-size，而不是parent的。所以child的padding是32px*1 = 32px
child的margin是2em，所以是32px*2 = 64px

em的層層放大的陷阱

<div class="parent">
父層
<div class="child">
子元素
<div class="child2">
子元素2
<div class="child3">
子元素3
</div>
</div>
</div>

</div>

.chid{
font-size:2em;
}
.chid2{
font-size:2em;
}
.chid3{
font-size:2em;
}

child1的font-size 是 16px *2 =32px
child2的font-size 是 16px *2 *2=64px
child3的font-size 是 16px *2 *2=128px

如果字體大小使用em的話，從上面的例子可以看到兩點

1.字體會一層層的累乘，進而讓內層的字體變得超大或是超小(如果乘的是小數的話)

2.內層的字體大小會受到所有外層的影響，難以控制。

這麼看來，對字體大小使用em真的不是個好點子。難道我們要回頭用px嗎?

當然不是，我們還有rem可以使用。

2.rem

不論使用在字體大小或是間距，其基準都是根元素(也就是html)。

現在來讓我們來將上個例子改成rem

<div class="parent">
父層
<div class="child">
子元素
<div class="child2">
子元素2
<div class="child3">
子元素3
</div>
</div>
</div>

</div>

.chid{
font-size:2em; /*改成rem*/
}
.chid2{
font-size:2em;/*改成rem*/
}
.chid3{
font-size:2em;/*改成rem*/
}

不論是child、child2、child3，其font-size都是 16px*2 =32px

比起em,rem更適合用於設定字體的大小。這也導出了個第一項原則:

使用rem來設定font-size

相對單位(relative units)在Responsive Layout的應用

在前面介紹相對單位(relative units)-em與rem,你一定在想，這個跟Responsive Layout有甚麼關係?~~為何我不能單單純純的用px,px不偷也不搶，為甚麼Responsive Layout要這麼歧視她~~

這裡KP用了兩個應用來展現了相對單位(relative units)的威力。

1.配合media Query與rem來一鍵調整不同螢幕大小的font-size

<div class="parent">
父層
<div class="child">
子元素
</div>
<div class="child">
子元素2
</div>

</div>

.chid{
font-size:2rem;
padding: 1em;
margin:2em;

}
@media only screen and (max-width: 600px){/*Big smartphones [426px -> 600px]*/
html{
font-size:12px
}
}


}

在max-width: 600px的media Query中,重設html的font-size為12px，這一次連動改變了兩個子元素的

font-size:從原本的16px*2變成12px*2 =24px
padding:從原本的16px*1變成12px*1=12px
margin:從原本的16px*2變成12px*2=24px

如果都使用相對單位的話，我們可以透過更改html的font-size來一次修改所有元素的font-size與間距。

2.使用em來一次設計各式大小的按鈕

<button class="btn btn1">
  按鈕1
</button>

<button class="btn btn2">
  按鈕2
</button>

.btn{
  padding:2em 3em; /*長寬為3:2*/
}
.btn1{
  font-size:0.5rem;
}
.btn2{
  font-size:1.5rem;
}

先用btn的共用class 來用em來設置padding。em會相對於元素的font-size縮放
用btn1的特定class來設置第一個按鈕的font-size為0.5rem。其padding會隨著font-size大小而縮小，且比例維持一樣。產生一個等比例的小按鈕。
用btn2的特定class來設置第一個按鈕的font-size為1.5rem。其padding會隨著font-size大小而縮大，且比例維持一樣。產生一個等比例的大按鈕。