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

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

比較常見的作法是使用CSS 省略號語法ellipsis，詳細作法可參考「讓標題過長的文字自動 ... 服務項目 諮詢/服務項目 客製化/套版架設網站流程 痞客邦搬家 架站作品集 導覽 如何使用本站 Blogger新手指引 本站的Hack及工具 熱門文章一覽 文章列表+讚統計 Blogger 小技巧 小工具 行動版 官方工具 留言相關 Blogger相關 Blogger筆記 Blogger範本 Blogger語法 Google Google試算表 Chrome套件 GoogleDrive Google搜尋 GoogleAdsense GoogleAnalytics AppsScript Google相關 部落格 部落格經營 搬家 SEO 社交分享按鈕 網站工具 網頁效能 部落格廣告 著作權保護 網頁設計 字型 RWD Bootstrap jQuery工具 CSS技巧 Javascript技巧 網頁開發工具 圖片展示工具 網路雲端 Facebook Line Dropbox Evernote 資訊安全 免費空間 會員中心 會員資訊 會員限定文章 會員加值文章 點數使用明細 會員公告 會員討論區 關於會員系統 關於 關於本站 贊助管道 版權聲明 隱私權政策 留言板 2017年6月26日 讓RWD網頁的文字(font-size)能自適應調整大小﹍極佳解決方案vmin WayneFu 電腦-網頁設計-CSS,電腦-網頁設計-RWD 0 A+ 色 a:link{text-decoration:underline;}.post{background:#fff;color:#222}[style*='990000'],[style*=cc0000],[style*='6aa84f'],[style*='3d85c6']{border-bottom:2pxdashed#ccc}[style*='990000']:before,[style*=cc0000]:before{content:"紅字";font-size:70%;font-weight:700;vertical-align:top}[style*='6aa84f']:before{content:"綠字";font-size:70%;font-weight:700;vertical-align:top}[style*='3d85c6']:before{content:"藍字";font-size:70%;font-weight:700;vertical-align:top} 最近需要架設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,百分比...等 MediaQueries：為不同螢幕尺寸，分別設定font-size的數值 RWD參數：vh,vw,vmin..等，對於自適應螢幕最方便的語法 1.相對數值 這篇「Blogger自訂行動版範本實作﹍(3)字體」→「十一、調整字體大小」，提供了使用"相對數值"來設定文字尺寸的範例。

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

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

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

WFU看了許多RWD非官方範本，CSS都是用這個方式來設計，說實在非常地麻煩，假設一個頁面有10個區塊要設定font-size，如果要處理5種螢幕尺寸的MediaQueries，那麼這個頁面就可能要設定： 10x5=50個font-size的數值 這件事光用想的就快抓狂，這也是接RWD案子時，會找最接近客戶需求的RWD範本來套、或使用現成框架，絕對不會想要自己刻CSS的原因。

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

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

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

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

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

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

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

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

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

2.使用vw 接著測試vw的效果，這個vw語法會隨著螢幕寬度而自行調整大小。

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

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

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

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

3.使用vh 下一個測試vh的效果，這個vh語法會隨著螢幕高度而自行調整大小。

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

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

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

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

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

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

上圖為模擬iPhone4直立的畫面，真是太感動了，測到目前為止唯一看起來正常的直立畫面！ 其實另外還有測試平板(Nexus7)的直立橫躺畫面，看起來都是可接受的。

那麼我相信在很多情況下，vmin有機會成為RWD文字大小的解答。

五、補充 有一個很不錯的jQuery外掛，能做到自適應文字大小： jQueryTextFill 官網提供了一個展示效果區塊，可自行輸入任意文字，隨著文字的增加，字體大小也會隨之縮小，可即時看到改變的效果。

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

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

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

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

更多RWD相關技巧： 0 0 如這篇文章對你有幫助，歡迎「分享」到FB、「追蹤」粉絲團、「訂閱」最新文章 FB LINE 電腦-網頁設計-CSS 電腦-網頁設計-RWD WayneFu 前端開發‧Blogger探研‧網站架設 歡迎來到我的雲端資料庫，這裡除了分享網路應用心得，也是最專業的Blogger中文部落格。

利用側邊欄「搜尋」及「文章分類」，可解決大多數的問題喔！ 下方連結還有更多的Blogger資源及服務，如需諮詢、合作，歡迎填寫聯絡表單或來信：[email protected] FB社團 粉絲團 Blogger工具 諮詢/架站/網頁設計 架站作品集 3則留言: treegb2018年1月5日上午8:49原來vmin和vmax是這樣的使用時機，長知識了！回覆刪除回覆回覆Leo2019年4月17日上午8:03請教一下html{font-size:1.6vmin;text-decoration:none;}我這樣設置然後針對兩個大標題又另外下.fonts-h1{font-size:3.75vmin;}.fonts-h2{font-size:3vmin;}電腦(大螢幕)看OK，但用Google的外掛調成手機螢幕尺寸時就又感覺文字好小在@mediascreenand(max-width:767px)480、320都有再加大但沒反應@@還是我哪邊搞錯了XD回覆刪除回覆WayneFu2019年4月17日上午8:09請見留言注意事項「CSS相關問題非免費諮詢，建議使用Chrome開發人員工具尋找答案。

」，看是不是被你範本其他地方的CSS覆蓋掉，或你的手機範本是不允許修改的官方範本。

刪除回覆回覆回覆新增留言載入更多… 張貼留言注意事項： ◎勾選「通知我」可收到後續回覆的mail！◎請在相關文章留言，與文章無關的主題可至「Blogger社團」提問。

◎請避免使用Safari瀏覽器，否則無法登入Google帳號留言(只能匿名留言)！◎提問若無法提供足夠的資訊供判斷，可能會被無視。

建議先參考這篇「Blogger提問技巧及注意事項」。

◎CSS相關問題非免費諮詢，建議使用「Chrome開發人員工具」尋找答案。

◎手機版相關問題請參考「Blogger行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger行動版範本修改技巧」，或本站Blogger行動版標籤相關文章。

◎非官方範本問題、或貴站為商業網站，請參考「Blogger免費諮詢+付費諮詢」◎若是使用官方RWD範本，請參考「Blogger推出全新自適應RWD官方範本及佈景主題」→不建議對範本進行修改！◎若留言要輸入語法，""這兩個符號請用其他符號代替，否則語法會消失！◎為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。

◎本站「已關閉自刪留言功能」。

站內搜尋 文章分類 生活-理財 (2) 生活-數位生活-3C產品 (18) 生活-數位生活-網路電視 (2) 生活-數位生活-Android (11) 生活-數位生活-Eink產品 (6) 生活-數位生活-iPhone (5) 休閒-三國志11-五奇戰記 (5) 休閒-三國志11-公孫恭開局 (9) 休閒-三國志11-引兵誘敵開局 (14) 休閒-三國志11-水淹開局 (2) 休閒-三國志11-火攻開局 (13) 休閒-三國志11-防守反擊開局 (13) 休閒-三國志11-圍城港關坑兵開局 (6) 休閒-三國志11-運用建築設施開局 (16) 休閒-三國志11-綜合主題 (8) 休閒-小遊戲-射擊 (2) 休閒-小遊戲-益智 (2) 休閒-小遊戲-動作 (11) 休閒-小遊戲-策略 (3) 休閒-太空戰士7 (6) 電腦-部落格-站務-大事紀要 (7) 電腦-部落格-站務-公告 (27) 電腦-部落格-站務-留言板 (3) 電腦-部落格-站務-會員系統 (7) 電腦-部落格-站務-網站服務 (11) 電腦-部落格-中國大陸封鎖 (7) 電腦-部落格-社交分享按鈕 (10) 電腦-部落格-部落格相關 (10) 電腦-部落格-部落格經營 (13) 電腦-部落格-著作權保護 (19) 電腦-部落格-搬家 (12) 電腦-部落格-網站工具 (31) 電腦-部落格-網域 (15) 電腦-部落格-廣告 (10) 電腦-部落格-Godaddy (7) 電腦-部落格-SEO (52) 電腦-部落格-WordPress (10) 電腦-網頁設計-字型 (18) 電腦-網頁設計-免費圖庫 (9) 電腦-網頁設計-使用者體驗 (13) 電腦-網頁設計-表格 (8) 電腦-網頁設計-接案心得 (5) 電腦-網頁設計-圖片展示工具 (10) 電腦-網頁設計-網頁技巧 (12) 電腦-網頁設計-網頁開發工具 (13) 電腦-網頁設計-網站效能 (18) 電腦-網頁設計-Bootstrap (10) 電腦-網頁設計-CSS (50) 電腦-網頁設計-HTML (23) 電腦-網頁設計-iOS (5) 電腦-網頁設計-Javascript技巧 (30) 電腦-網頁設計-Javascript筆記 (6) 電腦-網頁設計-jQuery (34) 電腦-網頁設計-NodeJs (6) 電腦-網頁設計-RWD (17) 電腦-網頁設計-SublimeText (3) 電腦-網路雲端-免費空間 (10) 電腦-網路雲端-爬蟲 (6) 電腦-網路雲端-資訊安全 (20) 電腦-網路雲端-線上工具 (16) 電腦-網路雲端-瀏覽器 (8) 電腦-網路雲端-Dropbox (5) 電腦-網路雲端-Evernote (10) 電腦-網路雲端-Facebook (50) 電腦-網路雲端-Github (2) 電腦-網路雲端-IFTTT (4) 電腦-網路雲端-Line (12) 電腦-網路雲端-PTT (8) 電腦-網路雲端-RSS閱讀器 (12) 電腦-網路雲端-YahooPipe (4) 電腦-Blogger-工具-文章列表-TOC (13) 電腦-Blogger-工具-文章列表-TOC極速版 (6) 電腦-Blogger-工具-私密留言 (6) 電腦-Blogger-工具-官方工具 (15) 電腦-Blogger-工具-側邊欄 (16) 電腦-Blogger-工具-推文 (5) 電腦-Blogger-工具-單篇文章計數器 (5) 電腦-Blogger-工具-搜尋功能 (8) 電腦-Blogger-工具-導覽列 (13) 電腦-Blogger-工具-Blogger工具 (22) 電腦-Blogger-Hack-留言-留言相關 (29) 電腦-Blogger-Hack-留言-舊範本留言 (10) 電腦-Blogger-Hack-標籤-多層樹狀標籤 (7) 電腦-Blogger-Hack-標籤-兩層樹狀標籤 (6) 電腦-Blogger-Hack-標籤-標籤文章列表 (3) 電腦-Blogger-Hack-標籤-標籤相關 (2) 電腦-Blogger-Hack-私密文章 (4) 電腦-Blogger-Hack-讀者反應 (4) 電腦-Blogger-Hack-Blogger語法 (15) 電腦-Blogger-行動版 (24) 電腦-Blogger-Blogger小技巧 (26) 電腦-Blogger-Blogger相關 (90) 電腦-Blogger-Blogger筆記 (14) 電腦-Blogger-Blogger範本 (20) 電腦-Google-搜尋 (14) 電腦-Google-試算表 (30) 電腦-Google-網站管理員 (8) 電腦-Google-Adsense (26) 電腦-Google-Analytics (16) 電腦-Google-AppsScript (16) 電腦-Google-Authorship (5) 電腦-Google-Chrome (19) 電腦-Google-CloudPlatform (1) 電腦-Google-Drive (21) 電腦-Google-G＋ (26) 電腦-Google-Gmail (9) 電腦-Google-Google相關 (21) 電腦-Google-GooglePhoto (7) 電腦-Google-Picasa (16) 電腦-Google-Youtube (5) 電腦-Windows-Hotkeyz (7) 電腦-Windows-Win軟體 (4) 電腦-Windows-Win8Win10 (7) 電腦-Windows-XP (1) 閱讀-有錢人想的和你不一樣 (15) 閱讀-為健康把關的57堂課 (2) 精選文章 最新文章 recentposts Blogger精選 網頁設計精選 聯絡我 最新回應 請先閱讀「填寫諮詢聯繫表單SOP」瞭解重要資訊，如非需要發案給本站，提問請至「Blogger社團」，本站不會回覆任何私人諮詢問題，謝謝！ 稱呼：(必填) 電子郵件：(必填) 您的網址或提問的相關網址：(必填) 簡單自介、如何找到本站：(必填) 請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填) 友格 關注1 關注2 訂閱 CC0免費圖庫搜尋引擎 TV線上看電視 RSS訂閱 FEEDLY訂閱 TOP