Categories: 前端相關

筆記 | 簡單理解CSS font-size的相對單位 em、rem、%

在撰寫css時，文字通常都佔據頁面很大的比例，字體、字體大小、行距…等，怎麼排版與設定大小距離都是一門學問，而在css中font-size的設定不是只有絕對單位的px可以設置，更多的是相對單位可供使用，在做RWD時也能更簡單的對字體做統一的等比縮放，雖然知道有這些單位的存在，但我自己撰寫時卻幾乎不常用相對單位做設定，於是希望邊加深相對單位的使用方式知識，邊練習運用在專案上。

em

該元素以倍數乘以父元素(上一層)的px值。

.father{font-size:16px;}
.son-1{font-size:1.5em;} // 16*1.5=24px
.son-2{font-size:1.5em;} // 24px*1.5=36px
.son-3{font-size:1.5em;} // 36px*1.5=54px

rem

該元素以倍數乘以根元素(html)的px值。

html{font-size:16px;}
.son-1{font-size:1.5rem;} // 16*1.5=24px
.son-2{font-size:1.5rem;} // 16*1.5=24px
.son-3{font-size:1.5rem;} // 16*1.5=24px

%

該元素以百分比乘以父元素(上一層)的px值。

.father{font-size:16px;}
.son-1{font-size:1.5%;} // 16*150%=24px
.son-2{font-size:1.5%;} // 24px*150%=36px
.son-3{font-size:1.5%;} // 36px*150%=54px

xx-small、x-small、small、medium、large、x-large 、 xx-large

以medium(預設值16px)為中間基準
xx-small：medium * 0.6
x-small：medium * 0.75
small：medium * 0.8
large：medium * 1.1
x-large：medium * 1.5
xx-large：medium * 2
像是衣服size的尺碼表XD