讓RWD 網頁的文字(font | css字體大小自動
最近需要架設RWD一頁式網站,結果在「自適應文字大小」這件事卡關,為何會如此呢?處理部落格型態的網站時,大部分直接套用現成的RWD「付費範本[1]」版型再來調整、修改。由於文字都是位於固定、切割好的板塊之內,調整字體大小的問題不大。而一頁式網站,可以算是開放式空間,文字會出現在哪裡不一定,視案主或設計師提供的設計圖而定。這樣子的RWD文字尺寸會有什麼問題呢?有效的解決方法又是如何?請見本篇的心得筆記。(圖片出處:pexels.com)[2]一、省略號的使用時機標題文字在手機上會面臨的問題,主要是螢幕寬度不夠,而標題可能...
最近需要架設 RWD 一頁式網站,結果在「自適應文字大小」這件事卡關,為何會如此呢?處理部落格型態的網站時,大部分直接套用現成的 RWD「付費範本[1]」版型再來調整、修改。由於文字都是位於固定、切割好的板塊之內,調整字體大小的問題不大。
而一頁式網站,可以算是開放式空間,文字會出現在哪裡不一定,視案主或設計師提供的設計圖而定。這樣子的 RWD 文字尺寸會有什麼問題呢?有效的解決方法又是如何?請見本篇的心得筆記。
(圖片出處: pexels.com)[2]
一、省略號的使用時機 標題文字在手機上會面臨的問題,主要是螢幕寬度不夠,而標題可能很長,導致網頁版 1 行就能顯示,但手機上可能會分成 3~4 行。因此標題文字不是單純地設定不同的大小尺寸,就能解決版面問題。
比較常見的作法是使用 CSS 省略號語法 ellipsis,詳細作法可參考「讓標題過長的文字自動省略﹍單行 CSS 技巧[3]」。
而 ellipsis 只適用於單行,若要處理兩行以上的版面,語法牽涉到不同瀏覽器版本的相容性,請參考這篇「讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧[4]」。
二、導覽列處理 處理 RWD 導覽列的文字,算是最麻煩的事,因為手機的寬度絕對裝不下這麼多文字,那麼字體大小再怎麼調整都沒有用。比較簡單的處理方法有這些,就不用煩惱文字尺寸的問題了:
三、文字大小的 CSS 語法 除了前面這兩種狀況的處理,接下來說明有哪些 CSS 語法可控制 font-size 文字大小:固定數值:px, pt..等,使用固定數值不適合用於 RWD,因為無法隨螢幕尺寸來調整。 相對數值:em, rem, 百分比...等 Media Queries:為不同螢幕尺寸,分別設定 font-size 的數值 RWD 參數:vh, vw, vmin..等,對於自適應螢幕最方便的語法1. 相對數值
這篇「Blogger 自訂行動版範本實作﹍(3) 字體[5]」→「十一、調整字體大小」,提供了使用 "相對數值" 來設定文字尺寸的範例。
請詳讀這部分的內容,使用相對數值語法 rem,對於處理 RWD 的文字非常方便,只要各處的文字都使用 rem,那麼只要調整 html 元素的字體大小,整個網頁...