跟著KP用21天征服Responsive Layout-W1-熟悉相對單位(relative units)
這周KP分享的第二個概念是相對單位(relative units) 、使用的2個原則與陷阱、如何應用它們來做Responsive Layout。
甚麼是相對單位(relative units)
相對單位(relative units)有兩種:
- em
- rem
相對於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大小而縮大，且比例維持一樣。產生一個等比例的大按鈕。
由於相對單位可以更有效率的設置不同螢幕下的元素大小，所以又導出第二項原則
不要使用px,用em或rem
總結
這就是今天相對單位的內容了，記得兩項原則
1.單位不要使用px,用em或rem
2.使用rem來設定font-size
