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

A nice algorithm for font-size relative to number of chars and screen width

本文关键字：字符 屏幕 算法 相对于 一个 很好 字体      更新时间：2023-09-26

好的，我有一个大字体(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");
}
相关文章：