響應式網站 ( 五 )

• 設計響應式網站時，請以相對比例的方式來設定文字尺寸，這樣字型大小才會根據視埠大小自動調整。
• 盡量不要以像素大小來設定文字尺寸，因為像素的數量會因為不同的裝置類型而變化，故不再適合作為跨裝置的度量單位。
• 響應式網站通常使用相對單位 em 與 rem 來設計。
• 樣式化文字時，要做的第一件事就是為網站設定預設字體尺寸( default font size )。

body { font-size: 100%; }

• 網站內其他地方使用的 em 與 rem，都是基於上例的基礎尺寸。
• 大多數裝置的預設字體尺寸是 16 像素。
• 可以透過改變基礎尺寸來調整整個網站的文字大小，但不影響內容的相對比例。
• em 表示元素當前的字體尺寸，其比例是相對於父元素的字體尺寸。
  範例：

body { font-size: 100%; }
h1 { font-size: 4em; }
p { font-size: 1.5em; }
span { font-size: 2em; }

<div>
ZZZ
<h1>AAA</h1>
<p>BBB<span>CCC</span>DDD</p>
</div>

// div 未設定，故 ZZZ 繼承父元素 body 的預設字體尺寸 1em
// AAA 相對於父元素 div 的預設字體尺寸，故為 1 * 4 = 4em
// BBB、DDD 相對於父元素 div 的預設字體尺寸，故為 1 * 1.5 = 1.5em
// CCC 相對於父元素 p 的預設字體尺寸，故為 1.5 * 2 = 3em

• rem 與 em 大小相同，但其比例是相對於 html 的字體尺寸，使用前必須先將 html 的 font-size 設定為 100%。( IE8 與更之前的瀏覽器不支援 rem )

html { font-size: 100%; }