简单的jQuery响应式文字插件

当前位置:主页 > jQuery库 > 文本和超链接 > 简单的jQuery响应式文字插件
简单的jQuery响应式文字插件
分享:

    插件介绍

    jquery-flowtext是一款简单实用的jQuery响应式文字插件。通过该响应式字体插件,你可以设置在大屏幕中显示较大尺寸的文字,而在小屏幕设备中相应的缩小文字的尺寸。

    浏览器兼容性

    浏览器兼容性
    时间:05-10
    阅读:
简要教程

jquery-flowtext是一款简单实用的jQuery响应式文字插件。通过该响应式字体插件,你可以设置在大屏幕中显示较大尺寸的文字,而在小屏幕设备中相应的缩小文字的尺寸。

使用方法

使用该响应式文字插件需要在页面中引入jquery和jquery.flowtext.js文件。

       
<script src="path/to/jquery.js"></script> 
<script src="path/to/jquery.flowtext.js"></script>
                
HMTL结构

为文本<p>元素添加class类flowtext即可。

<p class="flowtext">
  //响应式文本......
</p>                  
                
初始化插件

在页面DOM元素加载完毕之后,可以通过flowtext()方法来初始化该响应式文本插件。

// 使用默认配置
$('.flowtext-element').flowtext();

// 自定义参数
$('.flowtext-element').flowtext({
    // 参数
});
                

配置参数

  • minFontSize:类型:Integer,默认值:16。最小的flowtext字体大小。
  • maxFontSize:类型:Integer,默认值:20。最大的flowtext字体大小。
  • minScreenWidth:类型:Integer,默认值:320。最小的屏幕(viewport)尺寸。
  • maxScreenWidth:类型:Integer,默认值:1024。最大的屏幕(viewport)尺寸。

jquery-flowtext响应式文字插件的github地址为:https://github.com/libeo-vtt/jquery-flowtext