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

 

 

 

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

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

 

 

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/jquery.fittext.js"></script>
<script>
  $("#responsive_headline").fitText();
</script>

 

直接下載:fittext.js

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

 

Posted in CSS

Find the last offers by SkyBet at www.bettingy.com BettingY.com Bonuses