根據屏幕的寬度自動調整字體大小的功能: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