RWD 字型設定策略

RWD 系列文章 》

為了讓網頁內容能夠根據螢幕大小進行縮放,因此我們透過百分比的設定讓網頁支援動態設定,同樣的,就如同稍早提及的圖片配置,在固定尺寸的網頁上,字型大小的設定相當容易,只要指定固定的大小(px)即可,而採用 RWD 技術的網頁環境裏,為了讓字型能夠隨螢幕大小動態改變,固定字型大小的作法顯然行不通,解決的方式並不困難,可以考慮改成比例單位(例如 em)進行設定。

字型大小的設定單位,有絕對單位的 px ,以及比例單位的 em、rem與百世比。

像素(px)

像素(px)是一種絕對單位,例如當你將字型設定為16px,則網頁將以 16px 呈現字型, 沒有任何妥協,使用絕對單位的好處在於可以完全掌控網頁內容,這在過去以固定寬度為主要設計方式的時代並沒有什麼問題,然而行動裝置的崛起,以像素為單位的設計方式面臨了不小的挑戰。

精確的像素設定沒有辦法滿足多樣性的裝置呈現需求,例如根據個人電腦螢幕設計的的字型大小,在手機之類的小型螢幕上就會變得不容易檢視,反之亦然。除此之外,既使面對固定寬度的網頁設計,精確的像素設定亦不容易維護,一旦字型大小需要調整,逐一修改網頁中字型的設定值成了無可避免的問題。

為了避免上述的問題,比較好的作法是透過em或是百分比為字型大小進行設定。

比例

無論em、rem或是百分比,均是以瀏覽器預設字型樣式為基準進行比例配置。1 em表示預設字型大小,傳統桌上型電腦瀏覽器的預設字型大小是16px ,因此1em 會在此類型的瀏覽器上以 16px 大小呈現文字內容。考慮以下的網頁內容:

<p style="font-size:12.8px;">RWD-響應式設計-12.8px</p>
<p style="font-size:80%;">RWD-響應式設計-80%</p>
<p style="font-size:0.8em;">RWD-響應式設計-0.8em</p>  
<p>RWD-響應式設計-Defalut</p>
<p style="font-size:16px;">RWD-響應式設計-16px</p>
<p style="font-size:100%;">RWD-響應式設計-100%</p>
<p style="font-size:1em;">RWD-響應式設計-1em</p>
<p style="font-size:2em;">RWD-響應式設計-2em</p>

以桌上型電腦瀏覽器檢視網頁,得到以下的內容:



如你所見,在預設的情形,字型是以16px為基礎,無論是 100% 或是 1em 的設定均表示相同的大小,其它的字型則以此預設字型為比例進行縮放,以下為手機行動裝置呈現的畫面:



如你所見,我們只要以 em 為單位進行設定即能以比例為基礎進行字大小設定,例如針對 h1 的文字,設定為 2em ,如此一來便能呈現兩倍大小的字型。

無論em或是 % 的比例單位要特別注意上下文的比例配置,一旦採用了此種配置,文字的大小是以其上一層父元素為基礎進行比例縮放,例如以下的設計:

<body>
<p style="font-size:1em;">RWD-響應式設計-1em</p>
<hr />
<div style="font-size:2em;">
        <p style="font-size:0.5em;">RWD-響應式設計-INNER-0.5em</p>
        <p style="font-size: 50%;">RWD-響應式設計-INNER-50%</p>
        <p style="font-size:1em;">RWD-響應式設計-INNER-1em</p>
        <p style="font-size:100%;">RWD-響應式設計-INNER-100%</p>
</div> 
</body>

這段網頁配置首先將 div元素的 font-size 設定為 2em ,接下來其中的子元素以其為基準作設定,第一個子元素 p 設定為 0.5 em ,相對於整個網頁,其真正的大小是 2em*0.5em = 1em ,因此這個 p 元素中的字型會剛好等於網頁中的標準大小 1em ,其它的 p 元素類推,結果畫面如下:



相較於絕對單位px的設定,em或是%提供了更好的單性,但上下文的影響是個潛在的問題,如果想要保留em或是 % 的靈活性,不想被上下文環境比例的影響牽制,我們還有一種單位可以使用-rem ,以下的連結對 rem 進行簡要的說明。

CSS 的em 單位與CSS3 的rem

RWD 系列文章 》


沒有留言: