好的,所以我有一个带有大字体(100px)的输入字段。想法是,当用户开始写字母时,字体大小将减小,而不是使短语移出屏幕。
它也必须具有响应能力,因此包括屏幕宽度在内的一些算法将是不错的选择。
我现在所拥有的:
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")
}
问题在于它加快了字体大小的降低。但是它应该放慢速度。
有什么想法吗?
最佳答案
这达到了目的:
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");
}