我想要我的应用程序的一些脚本根据字符数和分辨率更改标题的字体大小,因此根据窗口分辨率和标题的字符数在脚本中使用不同的字体大小.
这是我现在拥有的:
$(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
}
在我的脚本的开头和结尾,但不起作用。
知道如何正确加入这两个函数吗?
非常感谢
最佳答案
您可能想要创建一个条件,其中字符数或分辨率会更改文本大小。
在 if
条件中使用 or-operator ||
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、...
关于javascript - 根据字符数和分辨率更改字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25457682/