手機網頁設計:文字自動縮放、等比縮放、文字百分比

7 月 9, 2015 | | 0 comments

手機眾多裝置的螢幕顯示大小不同,會因為排版時區塊及圖片可用百分比達到顯示等比縮放,但唯獨文字沒辦法設定依照顯示的百分比去做縮放。

就因為這樣設計排版上,主要視覺區塊內的文字,大小設計剛好在區塊內,以不同顯示比例去看,區塊及圖片會因為設定成百分比而依照螢幕大小縮放,但文字確保持在您設定的大小,這就會產生區塊有自動縮放大小,文字卻沒有自動縮放大小,使得你設計的版面跑位或不是你所要呈現的設計樣子。

{googleads center}

國外網站在這裡提供,一套解決方法使用jquery 外掛 fittext.js,簡單的應用,就可達到文字的自動依照您的顯示大小做縮放。

以下為簡單的套用方式:關於更多請至 fittext.js

  

直接下載:fittext.js

下載位址:https://github.com/davatron5000/FitText.js