我目前正在做一个小项目，我需要做的最后一件事是创建一个很好的响应式标题。
我找到了FitText.js，这似乎是我非常喜欢的东西，而且正是我所需要的。唯一的问题是这个插件使用了jQuery，而我在项目中根本没有使用过jQuery，不想只使用一个小插件。您是否听说过或使用过与 FitText.js 类似的插件，但它不需要 jQuery？
【问题讨论】：
标签： javascript jquery
Jeremy Keith (@adactio) 正在维护 FitText 的非 jQuery 替代方案：
【讨论】：
css 函数，一个非常基本的addEvent 函数（您的库或代码集合中应该已经有一个更好的版本）以及使用除以零的最小值和最大值的可疑设置。我没有看到将最小值和最大值设置为 +/- 无穷大的意义，应该使用实数。您只需要一行代码即可计算字体大小，因此只需编写您自己的函数即可。比 fitttext.js 做得更好应该不难（不管有没有 jQuery）。
这样的事情应该会让你开始，首先彻底测试。本质上，您根据元素的 offsetwidth 缩放文本的大小。您可能想设置最小和最大字体大小，但我不明白这一点。
resize函数大概只有两行代码。
<style type="text/css">
div {
border: 1px solid blue;
white-space: nowrap;
text-align: center;
}
</style>
<script>
function resize(el, factor) {
// Get element width
var width = el.offsetWidth;
// set default for factor
if (typeof factor == 'undefined') {
factor = 5;
}
// Set fontsize to new size
el.style.fontSize = (width / factor | 0) + 'px';
}
window.onload = function() {
function doResize() {resize(document.getElementById('d0'), 6);}
window.onresize = doResize;
doResize();
}
</script>
<div id="d0">Some text</div>
【讨论】：
OP，
jQuery 压缩后约为 94 KB。 Zepto 已压缩 ~ 9.7 KB。
简而言之，如果您改为包含 Zepto，并将插件最后一行对 jQuery 的引用更改为 Zepto — 它只是 有效。见this Fiddle
(function ($) {
$.fn.fitText = function (kompressor, options) {
// Setup options
var compressor = kompressor || 1,
settings = $.extend({
'minFontSize': Number.NEGATIVE_INFINITY,
'maxFontSize': Number.POSITIVE_INFINITY
}, options);
return this.each(function () {
// Store the object
var $this = $(this);
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).on('resize', resizer);
});
};
})(Zepto);
根据the docs：
Zepto 是一个用于现代浏览器的极简 JavaScript 库，具有很大程度上与 jQuery 兼容的 API。
因此，对于想要使用 jQuery 插件*而不必包含整个 jQuery 库的人来说，Zepto 似乎是一个合理的解决方法。
*虽然 100% 的 jQuery 覆盖率不是设计目标，但提供的 API 与其 jQuery 对应物相匹配。
希望对您有所帮助。
【讨论】：
我想这个问题现在已经解决了，但是不久前我一直在寻找类似的解决方案。我最终制作了自己的 Fittext 插件，因为我需要能够仅在特定的最小屏幕宽度以上才将其打开。因此，如果有人遇到同样的问题，这是我想出的解决方案：
【讨论】：