私は現在小さなプロジェクトに取り組んでおり、最後にやらなければならないことの 1 つは、レスポンシブな見出しを作成することです。
私はFitText.jsを見つけました。これは私がとても気に入っているようで、まさに私が必要としているものです。唯一の問題は、このプラグインが jQuery を使用しており、私はプロジェクトで jQuery をまったく使用しておらず、1 つの小さなプラグインだけを使用したくないことです。jQuery を必要としないことを除いて、FitText.js に似たプラグインを聞いたり、使用したりしたことがありますか?
Jeremy Keith (@adactio) は、FitText の非 jQuery 代替手段を維持しています。
このようなものは、最初に徹底的にテストしてください。基本的に、要素のオフセット幅に基づいてテキストのサイズをスケーリングします。最小および最大のフォントサイズを設定したいかもしれませんが、私にはその点がわかりません。
サイズ変更関数は、約 2 行のコードで作成できます。
<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>
ＯＰ、
jQuery 圧縮 ~ 94 KB。Zepto圧縮 ~ 9.7 KB。
つまり、代わりに Zepto を含め、プラグインの最後の行にある jQuery への参照を Zepto に変更すると、そのまま動作します。このフィドルを参照してください
(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);
ドキュメントによると：
Zepto は、主に jQuery と互換性のある API を備えた最新のブラウザー向けの最小限の JavaScript ライブラリです。
したがって、jQuery ライブラリ全体を含めることなく jQuery プラグイン* を使用したい人の場合、Zepto は妥当な回避策のように思えます。
* jQuery を 100% カバーすることは設計目標ではありませんが、提供される API は対応する jQuery と一致します。
それが役立つことを願っています。
この問題は今では解決されていると思いますが、しばらく前に同様の解決策を探していました。特定の最小画面幅より上でのみオンにする必要があるため、独自の Fittext プラグインを作成することになりました。したがって、誰かが同じ問題に遭遇した場合、私が思いついた解決策は次のとおりです。