【JavaScript】FitText.js一款使文字填充式自适应的jQuery插件

admin

2023年8月25日 0:28 本文热度 1804

插件描述：基于jQuery，不同于bootstrap的媒体查询自适应

需要引入的文件：

1

2

3

4

5

<script src="jquery.min.js"></script>

<script src="jquery.fittext.js"></script>

<script>

  jQuery("#responsive_headline").fitText();

</script>

fitText()里面可以填参数调整缩放的比例，默认是1；

1

2

3

jQuery("#responsive_headline").fitText(1.2); // 缩放浏览器文字文字调整的速度更快

jQuery("#responsive_headline").fitText(0.8); // 缩放浏览器文字文字调整的速度较慢设置字体的最大值&最小值

jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });

像Carousels, Scrollers, Accordions, Tabs这些需要隐藏或者不能调整宽度的效果，FitText.js在他们身上不能起效。

需要确认容器的宽度

display: inline 这个CSS属性是没有宽度的. 请使用display: block 或者display: inline-block+ 一个特定的宽度 (i.e. width: 100%).position:absolute 这个CSS属性也需要加一个特定宽度。

该文章在 2023/8/25 0:28:51 编辑过

关键字查询

正在查询...