Question

我希望我的应用程序的一些脚本根据字符数和分辨率更改标题的字体大小，因此根据窗口分辨率和标题的字符数在脚本中使用不同的字体大小

这就是我现在所拥有的：

 $(document).ready(function () {
 $(".boxes.concierto h2.nombreartista span a").each(function () {
 var numChars = $(this).text().length;     
 if ((numChars >= 1) && (numChars < 20)) {
 $(this).css("font-size", "20px");
 }
 else if ((numChars >= 20) && (numChars < 30)) {
 $(this).css("font-size", "18px");
 $(this).css("line-height", "20px");
 }
 else if ((numChars >= 30) && (numChars < 60)) {
 $(this).css("font-size", "15px");
 $(this).css("line-height", "18px");
 }
 else if ((numChars >= 100) && (numChars < 140)) {
 $(this).css("font-size", "0.9em");
 }
 else {
 $(this).css("font-size", "0.8em");
 }          
 });
 });

我试图添加：

if($(window).width() >= 1300){
// do your stuff
}

在我的脚本的开头和结尾但是没有用。

知道如何才能正确加入这两个功能？

非常感谢

Answer 1

你可能想要创建一个条件，其中字符数或分辨率会改变文本大小。

在||条件

中使用or-operator if

if ( ((numChars >= 20) && (numChars < 30)) || $(window).width() >= 1300 ) {
    $(this).css("font-size", "20px");
}

更好的方法

条件可能会变得非常复杂。更好的方法是设置如下公式：

var textSize = 1/numChars * $(window).width() * factor;

如果您希望文本大小逐步更改，您可以执行以下操作：

var stepSize = 3;
var steppedTextSize = Math.floor(textSize/stepSize) * stepSize;

steppedTextSize将以3为增量值。例如：12,15,18，......

根据字符数和分辨率更改字体大小

1 个答案:

更好的方法