讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin

最近需要架設 RWD 一頁式網站，結果在「自適應文字大小」這件事卡關，為何會如此呢？

處理部落格型態的網站時，大部分直接套用現成的 RWD「付費範本」版型再來調整、修改。由於文字都是位於固定、切割好的板塊之內，調整字體大小的問題不大。

而一頁式網站，可以算是開放式空間，文字會出現在哪裡不一定，視案主或設計師提供的設計圖而定。這樣子的 RWD 文字尺寸會有什麼問題呢？有效的解決方法又是如何？請見本篇的心得筆記。

(圖片出處: pexels.com)

一、省略號的使用時機

標題文字在手機上會面臨的問題，主要是螢幕寬度不夠，而標題可能很長，導致網頁版 1 行就能顯示，但手機上可能會分成 3~4 行。

因此標題文字不是單純地設定不同的大小尺寸，就能解決版面問題。

比較常見的作法是使用 CSS 省略號語法 ellipsis，詳細作法可參考「讓標題過長的文字自動省略﹍單行 CSS 技巧」。

而 ellipsis 只適用於單行，若要處理兩行以上的版面，語法牽涉到不同瀏覽器版本的相容性，請參考這篇「讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧」。

二、導覽列處理

處理 RWD 導覽列的文字，算是最麻煩的事，因為手機的寬度絕對裝不下這麼多文字，那麼字體大小再怎麼調整都沒有用。

比較簡單的處理方法有這些，就不用煩惱文字尺寸的問題了：

• 找 RWD 導覽列外掛來安裝
• 找 RWD 範本、挑選出喜歡的導覽列效果，可參考「如何從 Blogger 範本網站挑到理想的版型」
• 直接使用「Blogger 官方新版 RWD 範本」

三、文字大小的 CSS 語法

除了前面這兩種狀況的處理，接下來說明有哪些 CSS 語法可控制 font-size 文字大小：

• 固定數值：px, pt..等，使用固定數值不適合用於 RWD，因為無法隨螢幕尺寸來調整。
• 相對數值：em, rem, 百分比...等
• Media Queries：為不同螢幕尺寸，分別設定 font-size 的數值
• RWD 參數：vh, vw, vmin..等，對於自適應螢幕最方便的語法

1. 相對數值

這篇「Blogger 自訂行動版範本實作﹍(3) 字體」→「十一、調整字體大小」，提供了使用 "相對數值" 來設定文字尺寸的範例。

請詳讀這部分的內容，使用相對數值語法 rem，對於處理 RWD 的文字非常方便，只要各處的文字都使用 rem，那麼只要調整 html 元素的字體大小，整個網頁的文字都能同時等比例縮放，不必一個個微調。


2. Media Queries

參考「Blogger 製作自適應網頁(RWD)﹍懶人法實作」，可瞭解 Media Queries 語法的使用方式。

這個語法是 RWD 網頁最基本的設計方式，單獨為各種螢幕尺寸，分別設定某個區塊的文字尺寸。

WFU 看了許多 RWD 非官方範本，CSS 都是用這個方式來設計，說實在非常地麻煩，假設一個頁面有 10 個區塊要設定 font-size，如果要處理 5 種螢幕尺寸的 Media Queries，那麼這個頁面就可能要設定：

• 10 x 5 = 50 個 font-size 的數值

這件事光用想的就快抓狂，這也是接 RWD 案子時，會找最接近客戶需求的 RWD 範本來套、或使用現成框架，絕對不會想要自己刻 CSS 的原因。


3. vh, vw, vmin

還好 CSS3 出了 vh, vw, vmin 這些 RWD 語法，可以成為 font-size 在 RWD 版型的救兵。

需要語法教學可參考這篇「好用的css 3新單位vh vw」，下面會以案例來詳細說明。

四、調整 font-size RWD 案例

為了脫離 Media Queries 地獄，我想找到一個萬用的解決方式，最好 font-size 只要設定一次，就能讓各種螢幕尺寸的效果都是可接受的，以下是我的測試筆記。




上圖是原始網頁版設計圖，我需要試著調整圖中的文字，在各種 RWD 螢幕尺寸的效果都是可接受的。


1. 使用 rem

rem 是一種可能的解決方式，我在網頁版將 html 元素設定 font-size: 16px，將橘色文字的區塊，設定 font-size: 3rem (也就是 48px 的大小)，看起來效果還可以。




上圖為模擬 iPhone 4 橫躺的畫面，我將行動版的 html 元素設定 font-size: 13px，已經是非常小的數值了，那麼橘色文字 font-size 的 3rem 代表 39px 大小，在上圖的效果還可以。




但模擬 iPhone 4 直立時，結果就破版了。

雖然將行動版 html 的 font-size 設的更小可以解決上的狀況，但連帶也會讓其他區塊的文字顯得更小。

所以結論是，這個情況下 rem 不是最好的解決方案。


2. 使用 vw

接著測試 vw 的效果，這個 vw 語法會隨著螢幕寬度而自行調整大小。在網頁版先調整 font-size: 5vw，為可接受的尺寸效果。




上圖為模擬 iPhone 4 橫躺的畫面，為了節省時間只調整橘字尺寸，下方文字未調整。

圖中可看到橘字 5vw 的尺寸還可接受，有稍微偏小一點。




但是 iPhone 4 直立的橘字就太小了，5vw 是完全無法接受的效果。


3. 使用 vh

下一個測試 vh 的效果，這個 vh 語法會隨著螢幕高度而自行調整大小。在網頁版先調整 font-size: 10vh，為可接受的尺寸效果。




上圖為模擬 iPhone 4 橫躺的畫面，圖中可看到橘字 10vh 的尺寸可以滿意的。




可惜 iPhone 4 直立的橘字，10vh 又破版了...。


4. 使用 vmin

最後測試 vmin 語法，他會隨著從螢幕的寬度、高度，兩者之間取較小的那個當作參考單位 → 感覺上這個判斷機制會是 RWD 的解答。

我在網頁版先調整 font-size: 10vmin，為可接受的尺寸效果。




上圖為模擬 iPhone 4 橫躺的畫面，其實就跟 10vh 的效果一模一樣，因為螢幕橫躺時，高度的數值是比較小的，vmin 取的值就是 vh。




上圖為模擬 iPhone 4 直立的畫面，真是太感動了，測到目前為止唯一看起來正常的直立畫面！

其實另外還有測試平板(Nexus 7)的直立橫躺畫面，看起來都是可接受的。那麼我相信在很多情況下，vmin 有機會成為 RWD 文字大小的解答。

五、補充

有一個很不錯的 jQuery 外掛，能做到自適應文字大小：

• jQuery Text Fill

官網提供了一個展示效果區塊，可自行輸入任意文字，隨著文字的增加，字體大小也會隨之縮小，可即時看到改變的效果。

如果某些區塊真的很難由 CSS 調到滿意的效果，也許可考慮安裝這個外掛。

只不過能由 CSS 做到的事情，盡量還是交給 CSS 處理，因為「過多的 JS 外掛會影響網頁效能」。

六、小結

比起 Media Queries 需要設定數不清的參數，rem 需要設定至少 2 次參數(且效果不一定能滿意)，vmin 有可能只設定一次，就讓文字大小 font-size 在各種螢幕尺寸顯示正常。

而 vmin 的數值應該要設定為多少，不一定能一次就找出來，但使用「Chrome 開發人員工具」的模擬行動裝置功能，很快就能測試出一個各種螢幕尺寸都能接受的數值了。

更多 RWD 相關技巧：