私は現時点で小さなプロジェクトに取り組んでいます。私がする必要がある最後のことの1つは、すばらしい反応的な見出しを作成することです。FitText.jsの代わりに非jQuery？
私はFitText.jsが見つかりました。私はたくさんのものが好きで、私が必要としているものです。唯一の問題は、このプラグインがjQueryを使用していて、プロジェクトでjQueryを使用しておらず、小さなプラグインを使用したくないということです。 jQueryを必要としない点を除いてFitText.jsに似たプラグインを聞いたことがありますか？
ありがとう、ちょうど私が探していたもの。 – raf
なぜそれを使用するのか分かりませんが、それは平均的なコードです。これは未使用の 'css'関数、非常に基本的な' addEvent'関数（あなたのライブラリやコードコレクションにはもっと良いバージョンがあるはずです）と、ゼロ除算を使って最小値と最大値をInfinityに設定します。最小値と最大値を+/-無限大に設定する点はありません。実数を使用する必要があります。あなたはフォントサイズを計算するために1行のコードしか必要としないので、独自の関数を書くだけです。 fitttext.js（jQueryの有無にかかわらず）よりもうまくいくのは難しいことではありません。 – RobG
OP、
jQuery圧縮〜94 KB。 Zepto圧縮〜9.7 KB。
要するに、Zeptoを代わりに使用し、プラグインの最終行のjQueryへの参照をZeptoに変更すると、ちょうどがになります。 the docsによると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);
を参照してください：
Zeptoは主にjQueryの互換APIを備えたモダンなブラウザのミニマリストのJavaScriptライブラリです。
したがって、jQueryライブラリ全体を含めることなくjQueryプラグイン*を使用したい人の場合、Zeptoは妥当な回避策のようです。
* 100％jQueryカバレッジは設計目標ではありませんが、提供されるAPIはjQueryの対応するものと一致します。
希望するものがあります。
ありがとう、私は間違いなくそれをチェックアウトするでしょう。 – raf
このようなものは、まず徹底的にテストしてください。基本的には、要素のオフ幅に基づいてテキストのサイズを調整します。最小フォントサイズと最大フォントサイズを設定することができますが、その点は表示されません。
resize関数は約2行のコードにすることができます。
ジェレミー・キース（@adactio）はFitText非jQueryの選択肢を維持している<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>
ありがとう、いい仕事。 – raf
私はこの問題はしかし、私は同様のソリューションを探していた、今では解決されていると思いますしばらく前。私は自分のFittextプラグインを作成することになった。なぜなら、特定の最小画面幅を超えてのみスイッチを切る必要があったからだ。誰もが同じ問題にぶつかるのであれば、ここで私が思いついた解決策があります：
あなたはどのようなライブラリを使用している場合ではないjQueryのは、どんな場合？それをタグとして追加すると役立ちます。 –
[FitText.jsのソースコード]（https://github.com/davatron5000/FitText.js/blob/master/jquery.fittext.js）の有効部分は、ほんの数行に過ぎません。 jQueryの依存関係を簡単に削除できます。 –
@KevinB現在のところありません。私はすべてを最小限に抑えています。私はとにかく（少なくとも今のところは）何も必要ありません。 – raf