根據屏幕的寬度自動調整字體大小的功能:jQuery.fontFlex

jopen 10年前發布 | 56K 次閱讀 jQuery Ajax框架 jQuery.fontFlex

一個輕量級</span>jQuery擴展,能夠根據屏幕/瀏覽器寬度動態變化頁面字體大小旨在實現自適應CSS布局</span>

安裝

Include the latest version of jQuery and jQuery.fontFlex.js in the <head> of your HTML document:

<script src="jQuery.min.js"></script>  
<script src="jQuery.fontFlex.js"></script> 

如何使用

Define a default CSS font base by setting font-size: 1em and line-height: 150% on the body or intended element. Declaring the font-size is optional, but highly recommended in case javascript is disabled. Finally, call the plugin on said element.

Syntax Example

$(function() {

  // All elements
  $('body').fontFlex(14, 20, 70);

  // H1 only
  $('h1').fontFlex(24, 36, 70); 

});

Custom Parameters
min Minimum font-size in pixels
max Maximum font-size in pixels
mid Mid-range buffer. Values ranging from 60 to 70 produce the best results. Lower values produce a larger initial font-size, while higher values produce the opposite. Adjust accordingly to fit your requirements.

Live Demo: http://code.nath.co/fontFlex

瀏覽器支持

– Google Chrome
– Safari ( Desktop and Mobile )
– Internet Explorer ( 9, 10, 11 )
– Firefox

項目主頁:http://www.baiduhome.net/lib/view/home/1411391007609

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!