Javascript, 網頁設計

jQuery教學-FitText.js讓網頁中的文字,也支援RWD自適應縮放

梅干2018/06/15
梅問題-jQuery教學-FitText.js讓網頁中的文字,也支援RWD自適應縮放
  現在製作RWD自適應網頁,已是網頁的基本需求了,而自適應最大的特點就是,無論今天是使用任何的裝置,網頁都能依照裝置的解析,調整版型讓網頁皆能在各裝置中顯示,而這一切都要歸功於CSS3,新增了許多新的屬性,讓網頁能在各裝置中作設定,並且讓網頁中的區塊、圖片自動的縮放比例,以符合各裝置中的解析。
  而無論是DIV的區塊還是IMG影像,都能自行的縮放比例,唯獨文字的部分,是一個令人比較頭大的部分,雖然說在文字的屬性中,也多了幾個新的單位,但還是無法達到完美的縮放,還是得再手動設定,才能讓文字在各個裝置中,閱讀起來大小合宜,為了解決文字自動縮放的問題,最近梅干發現FitText.js這隻外掛,還真是一個好物,可設定文字的縮放區間,讓文字在各裝置,閱讀起來大小適中,至於要怎來使用FitText.js,現在就一塊來看看吧!
FitText.js
外掛名稱:FitText.js
外掛下載:https://github.com/davatron5000/FitText.js

Step1
首先,將外掛下載完畢後,分別先將jquery與fittext.js加到body結尾上方。
<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>

Step2
接著將文字加到body間,而這邊梅干分別使用了一個h1並將它id設為「fittext」與一個p標籤裡面則放了一些簡短的說明文字。
<div class="container">
<h1 id="fittext">[開箱] PICO輕巧隨身探色器!你說的白是什麼白讓PICO來告訴你</h1>
<p>顏色是一件無法用三二句言詞,就能將顏色清楚的表達出來,因此只是口中的一個紅,就有千百種的變化,而每人心中的紅色都有所不同,所以要讓對方能清楚的知道是那一個紅、那一個黃、那一個藍,最快的方法,就是找到實體的顏色,或是色票才能讓對方清楚的知道,原來你心中的紅是那一個紅。</p>
</div>

Step3
這再啟用FitText,而經梅干實測後,縮放系數+設定字級大小區間最為好用,而在$("選擇要套用的元素或名稱").fitText(縮放倍數, { minFontSize: '最小文字字級', maxFontSize: '最大文字字級' });,因此梅干就設定字級在18px到48px間,這時它就會自動依照區塊比例,調整文字的字級大小。
$("#fittext").fitText(1.5, { minFontSize: '18px', maxFontSize: '48px' });

Step4
當設定好後,開啟瀏覽器來預覽一下,這時文字就會依照,區塊間來作調整。
梅問題-jQuery教學-FitText.js讓網頁中的文字,也支援RWD自適應縮放
Step5
當縮成行動裝置時,文字也會依照區塊縮小,但最小值就是剛所設定的18px,所以完全不用擔心在手機中閱讀文字感到吃力,而FitText.js真是一個好物,因此身為網設的你,這隻外掛千萬別錯過了。
梅問題-jQuery教學-FitText.js讓網頁中的文字,也支援RWD自適應縮放
#範例預覽