一个很好的字体大小算法，相对于字符数和屏幕宽度

Question

好的，所以我有一个大字体（100px）的输入字段。我们的想法是，当用户开始写字母时，字体大小会降低而不是短语移出屏幕。

它也必须有响应，因此包含屏幕宽度的一些algorighm会很好。

我现在拥有的：

var chars = $('#big-search').val();
var w = $(window).innerWidth();

var fz = parseInt($('#big-search').css("font-size"), 10);
console.log(fz);
var nfz = 100-((chars.length/w)*(w*2.2));
if(nfz < 100){
    $('#big-search').css("font-size", nfz+"px")
}

问题在于它加速了字体大小的降低。但它应该放慢速度。

对此有何想法？

Answer 1

这就是诀窍：

var baseFz = 100;
var chars = $('#big-search').val();
var w = $(window).innerWidth();
var nfz = (w/100)*(baseFz/chars.length);

if(nfz <= 100 && nfz >= 20){
    $('#big-search').css("font-size", nfz+"px");
} else if(nfz >= 100){
    $('#big-search').css("font-size", 100+"px");
} else if(nfz >= 20){
    $('#big-search').css("font-size", 20+"px");
}